o仔札记 -- W3C标准下的页面构建|重构 http://imouou.com/blog 我与梦想曾经擦肩而过，现在只剩下不断的追求… Fri, 28 Jan 2011 03:09:25 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 html5 video完美兼容浏览器和video格式mp4|webm|ogv|flv转换工具下载 http://imouou.com/blog/?p=434 http://imouou.com/blog/?p=434#comments Fri, 28 Jan 2011 03:03:56 +0000 o仔 http://imouou.com/blog/?p=434 这里我贴出了两种解决方案，只是ie下的flash播放器插件不同，一个用的是 jwplayer 一个是 flowplay 两种的定制性都很强,我在里面都贴了官方的地址，需要定制可以自己去看文档，两种免费版都有logo

html5出来之前，炒得沸沸扬扬，说html5要取代 flash？不敢苟同，只有用过之后才知道。就像现在的video 标签，可以直接支持视频音频播放了，但是各个浏览器巨头标准不统一，导致1个视频需要转3种格式，这里我还转成4种格式，跟windows下的服务器有关，后面会把我使用过程中遇到的问题跟解决方法给罗列出来，希望对有需要用到html5的网友有用。

第1种解决方案

	<video width="800" height="600" autoplay>
		<!-- MP4 must be first for iPad Safari! -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.mp4"  type="video/mp4"  /><!-- WebKit video -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.webm" type="video/webm" /><!-- WebM/VP8/Vorbis -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.ogv"  type="video/ogg"  /><!-- Firefox / Opera -->
		<!-- fallback to Flash:jwplayer support type flv mp4,more config see the doucument http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5 -->
		<object width="800" height="600" type="application/x-shockwave-flash" data="http://models.pm.fabriqate.com/wp-content/themes/photoshot/js/player.swf">
			<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
			<param name="movie" value="http://models.pm.fabriqate.com/wp-content/themes/photoshot/js/player.swf" />
			<!-- controlbar have three option : false|over -->
			<param name="flashvars" value="autostart=true&amp;controlbar=false&amp;image=http://models.pm.fabriqate.com/wp-content/themes/photoshot/images/videoscreen.jpg&amp;file=http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.flv" />
			<!-- fallback image -->
			<img src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/images/videoscreen.jpg" width="800" height="600" alt="Big Buck Bunny" title="No video playback capabilities, please download the video below" />
		</object>
	</video>

第2种解决方案

	<video width="800" height="600" autoplay>
		<!-- MP4 must be first for iPad Safari! -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.mp4"  type="video/mp4"  /><!-- WebKit video -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.webm" type="video/webm" /><!-- WebM/VP8/Vorbis -->
		<source src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.ogv"  type="video/ogg"  /><!-- Firefox / Opera -->
		<object id="flash_fallback_1" class="vjs-flash-fallback" width="800" height="600" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
			<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
			<param name="allowfullscreen" value="true" />
			<!-- playlist more option http://flowplayer.org/demos/index.html-->
			<param name="flashvars" value='config={"playlist":[{"url": "http://models.pm.fabriqate.com/wp-content/themes/photoshot/01.flv","autoPlay":true,"autoBuffering":true}]}' />
			<img src="http://models.pm.fabriqate.com/wp-content/themes/photoshot/images/videoscreen.jpg" width="800" height="600" alt="Poster Image" title="No video playback capabilities."/>
		</object>
	</video>

使用中可能会遇到的问题：

1. firefox 不能播放，firefox的 ogv 需要 服务器环境配置支持，如果你的服务器环境不是最新版的可能要做点修改，在 apache\conf\mime.types

最后添加一行，引号里面内容 “video/ogg ogv”

怎么知道自己的环境支持不支持 ogv呢？ 你把ogv放在本地，通过localhost/01.ogv 在firefox打开，打得开的话就支持了，打不开提示保存就不支持；

2. safari 浏览器 在Windows 下需要安装 quicktime 解码才能支持html5播放，如果打不开的话，会采用flash播放，但是在ipad上面是没问题的；

3. 本地测试那个player.swf 会不支持本地播放，需要用在线地址，所以请下载下来，然后再上传到你的空间，如果不能下载，压缩包里有~~但要定制播放器什么的，看官方配置，都把网址注释在里面了；

4. 建议在使用 player.swf 的时候，尽量把你的播放列表 转为flv，尽管它们还支持mp4格式，但是你的空间不支持，那传上去也会不能播放的，像ogv一样在服务器环境配置添加了以后，也还是不能播放，这个可能跟mp4转的编码有关，所以尽量转成flv格式最佳；

5. 所以最后你把你的avi或者其它格式视频，转成 4种格式，mp4,webm,ogv,flv，当然你可以选择只转3种格式，如果你有多个视频，估计你要悲剧了，光是 webm跟ogv这两种稀有格式的转换软件就够你折腾个半天了。幸运的是，这些软件哥都找齐了，你只需要下载就行了

 

下载地址（不保证时效）：http://u.115.com/file/f194b5f123#

 

上面代码我只做了整理，问题这些就都是亲自体验，希望对你有帮助，o仔札记：http://imouou.com/blog/

随机阅读

]]> http://imouou.com/blog/?feed=rss2&p=434 10 解决ie下页面空白Bug详解 http://imouou.com/blog/?p=431 http://imouou.com/blog/?p=431#comments Sun, 26 Dec 2010 03:02:04 +0000 o仔 http://imouou.com/blog/?p=431 ie出现空白的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>标题</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
内容
</body>
</html>

这段代码咋看没有什么问题，但是在ie却出现了空白，内容两个字无法显示，原因就是 Title 如果是中文字符，必须在 Meta编码声明后面，我做了几种假设来验证这个答案：

如果Title是英文字符，那内容就可以正常解析；
如果Title是中文字符，那内容就不能显示；

如果Title是中英文字符，那内容还是不能显示；
如果Title是中文字符，不能显示，把它改成 英文字符，刷新页面，可以显示，再改为中文字符，刷新页面，可以显示了，但是如果给别人没有这个页面缓存的人打开，还是不能显示的。

所以结果就是：Title 如果是中文的，必须跟 Meta 编码调换位置。

正确的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>标题</title>
</head>
<body>
内容
</body>
</html>

title如果是中文的为什么要在 Meta 的编码后面？有兴趣的可以继续深究。

我们的页面在用记事本编辑保存的时候，有一个编码选项，ANSI,Unicode,Unicode big endian,UTF-8 ，至于它们分别代表什么，可以自己搜一下，我想说的是，我们在页面保存的时候，本身会存成默认的一种编码，如果你的Meta 声明是 Utf-8，然后你的页面保存编码是 ANSI，那么网页显示的时候就会出现乱码，这时候就需要转成Utf-8的格式了，页面编码对了，如果你的Title 在Meta编码声明上面，那么这个页面在ie就没法显示，因为

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

只对声明以下内容起作用。
这样就不难解释上面的代码为什么会在ie下面出现空白了吧？

再继续衍生一下，我们在css保存的时候，很少在css代码前面 加一个编码，

@charset "utf-8";

建议最好还是加上去，然后页面保存的时候记得用UTF-8格式，如果你的团队里每个人写一个块的css代码，到最后拼合起来，页面肯定会比较乱，所以我们一般都会加上注释，身为中国人，当然是汉字注释比较常见，也比较好理解，如果没有这个编码声明，到最好css 打开的时候，注释变成了乱码。那注释就失去了意义，还有一种情况，你可能在写代码的时候，你不小心用了圆角的空格符，这是属于Utf-8的编码的，而你没有声明，那么最糟的情况可能会出现，圆角空格符的下面css都没有被解析，那整个页面就错乱，而这种原因比较隐蔽，你花去找bug的时间会比在CSS上面加个声明少吗？

养成一个良好的习惯尤为重要！

相关阅读

]]> http://imouou.com/blog/?feed=rss2&p=431 0 Iframe内容自适应两种方法 http://imouou.com/blog/?p=424 http://imouou.com/blog/?p=424#comments Mon, 20 Sep 2010 15:21:42 +0000 o仔 http://imouou.com/blog/?p=424 第1种，都在同一个页面，通过脚本写在当前页面控制加载内容的自适应，这种方法很不错，不过不能兼容apple safari 浏览器。 在safari浏览器的第一次加载是可以正常的，如果里面有链接的target也是指向这个iframe ，那么内容就不能自适应，会以第一次加载的高度为准。

第1种：首页加载代码

<script type="text/javascript">
function iframeFitHeight(oIframe)
   {//Iframe窗口自适应高度 兼容 IE6.0 FF2.0以上
 try
    {
       var oWin = oIframe.name ? window.frames[oIframe.name] : oIframe.contentWindow;
       oIframe.style.height = oWin.document.body.scrollHeight + "px";
    }
   catch(e){}
    }
</script>

调用代码用onload函数

 <iframe border="0" frameborder="0" scrolling="no" src="main.html" name="myframe" width="100%" onload="iframeFitHeight(this)"></iframe>

到这里基本可以支持主流浏览器除了safari。
解决办法就是在每点击一次，load一次内容并且重新赋予内容的高度给予父层的iframe，因此下面的代码一样需要加载在首页。

/* 修复safari内部链接点击 */
$(function(){
    $("#mainframe").load(function(){
        var height = $(this).contents().find("#contenter").height() + 40;
//这样给以一个最小高度
        $(this).height( height < 400 ? 400 : height );
    });
});

第2种：
这种需要把脚本代码放到准备加载到iframe的内容里。此方法需要页面可以让你更改，因为代码需要加载在目标的内容里。不过一样不兼容safari的第二次点击。

main.htm: 想要在这个页面显示iframe的内容的页面。

<html>
    <head>
       <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' />
       <meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' />
       <title>iframe自适应加载的页面高度</title>
    </head>  

    <body>
        <iframe src="child.htm"></iframe>
    </body>
</html>

child.htm:要加载自适应的网页

<html>
<head>
    <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' />
    <meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' />
    <title>iframe  自适应其加载的网页(多浏览器兼容)</title>
    <script type="text/javascript">
    <!--
    function iframeAutoFit()
    {
        var ex;
        try
        {
            if(window!=parent)
            {
                var a = parent.document.getElementsByTagName("IFRAME");
                for(var i=0; i<a.length; i++) //author:meizz
                {
                    if(a[i].contentWindow==window)
                    {
                        var h1=0, h2=0;
                        if(document.documentElement&&document.documentElement.scrollHeight)
                        {
                            h1=document.documentElement.scrollHeight;
                        }
                        if(document.body) h2=document.body.scrollHeight;

                        var h=Math.max(h1, h2);
                        if(document.all) {h += 4;}
                        if(window.opera) {h += 1;}
                        a[i].style.height = h +"px";
                    }
                }
            }
        }
        catch (ex){}
    }
    if(document.attachEvent)
    {
        window.attachEvent("onload",  iframeAutoFit);
        window.attachEvent("onresize",  iframeAutoFit);
    }
    else
    {
        window.addEventListener('load',  iframeAutoFit,  false);
        window.addEventListener('resize',  iframeAutoFit,  false);
    }
    //-->
    </script>
</head>
<body>
    <table border="1" width="200" style="height: 400px; background-color: yellow">
        <tr>
            <td>iframe  自适应其加载的网页(多浏览器兼容，支持XHTML)</td>
        </tr>
    </table>
</body>
</html>

以上两种方法的代码均来自互联网. 部分有注释作者.

相关阅读

]]> http://imouou.com/blog/?feed=rss2&p=424 0 让wordpress显示首页index.html http://imouou.com/blog/?p=416 http://imouou.com/blog/?p=416#comments Fri, 03 Sep 2010 09:46:08 +0000 o仔 http://imouou.com/blog/?p=416 假设我有一个网站放在跟wordpress同个目录，需要第一个是显示 index.html 而不是 index.php 这个时候，下面的方法就派得上用场了。如果你的wordpress不介意在二级目录就没这样的烦恼了。

原因：wordpress的index.php 会一直循环调用，如果更改了.htaccess 文件为 index.html 那么日志就会循环调用不出来。

修改首页为.html 需要注意：

1.在wordpress 后台修改永久链接(Permalink Settings)， 把default 改为 下面哪个都行，根据自己需要（有部分风格会用博客的根目录，这样首页更改了，日志链接就点击不进去了，所以需要修改永久链接）。

会在根目录生成一个.htaccess 文件


2.修改.htaccess 文件，

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

上面的代码会根据自己所选生成，在 # END WordPress 上面增加下面代码

<IfModule dir_module>
   DirectoryIndex index.html index.php
</IfModule>

2.修改rewrite.php文件 把index.php 改为你现在的blog 首页，把index.php要复制多一个改名为home.php

wp-includes/rewrite.php

在 515 line.

var $index = 'home.php';

如果更换风格，首页不是.html 那这个要更改回 index.php

3.搜索action的路径需要修改 searchform.php ，因为默认的wordpress 还是以根目录为搜索，所以需要更改为现在的首页。

wp-content\themes\PetakSawah\searchform.php

现在是改到

action="<?php bloginfo('home'); ?>/home.php"

就这样，你的另外的网站首页就可以跟wordpress兼容了。。

相关阅读

]]> http://imouou.com/blog/?feed=rss2&p=416 2 让页面绝对水平垂直居中–jquery例子 http://imouou.com/blog/?p=411 http://imouou.com/blog/?p=411#comments Mon, 23 Aug 2010 03:08:43 +0000 o仔 http://imouou.com/blog/?p=411
例子的大概的示意图，以例子为准，截得不够绝对居中。

也许你也会用到的一个例子,让页面垂直居中。。如果你的分辨率够高的话，你就会发现很多页面如果不够长，就会全在上面那么一点，下面留了很多空白。。这时候就需要用到垂直居中了。原理很简单，里面都有注释了，就不废话了。。需要就拿去用。。还可以继续扩展下去。。
兼容 firefox ie6以上 chrome opera

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>绝对垂直居中的例子--http://imouou.com/blog/</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<style type="text/css">
		#wrap {height:200px;width:200px;background:#cccccc;position:absolute;}
	</style>
	<script type="text/javascript">
		$(function(){
			function windowalign(){
				var bodyheight = $(document).height(),  //整个网页的宽度 如果这里是window ie6and ie7 得到的是负数
					bodywidth = $(window).width(),  //整个网页的高度 如果这里是document ie7不会水平居中
					wrapwidth = $("#wrap").width(),  //要垂直居中的内容的宽度
					wrapheight = $("#wrap").height();  //要垂直居中的内容的高度度
					postop = (bodyheight-wrapheight)/2;  // 获取顶部的position
					posleft = (bodywidth-wrapwidth)/2;  // 获取左边部的position
					$("#wrap").css({"left":posleft+"px","top":postop+"px"});  // 设置position
			}
			windowalign();
			$(window).resize(function(){  // 当调整窗口的时候动态修正位置
				windowalign();
			});
		})
	</script>
</head>
<body>
	<div id="wrap"></div>
</body>
</html>

随机阅读

]]> http://imouou.com/blog/?feed=rss2&p=411 3 National Geographic Flash http://imouou.com/blog/?p=407 http://imouou.com/blog/?p=407#comments Sat, 24 Jul 2010 01:22:45 +0000 o仔 http://imouou.com/blog/?p=407

National Geographic – Ancient Treasure Ships
官方地址：http://ancienttreasureships.com/

这是前段时间跟3个同事一起完成的一个flash整站，整站都是用as2.0完成的。。现在链接的只是主文件，链接不了其它flash，想看完整版的可以打开官方观看。

Epic Voyage 是一个航海旅行的动画，重走当年海上丝绸之路。（丝绸之路是历史上横贯欧亚大陆的贸易交通线，促进了欧亚非各国和中国的友好往来。中国是丝绸的故乡，在经由这条路线进行的贸易中，中国输出的商品以丝绸最具代表性。）

每走到一个地方，都会有一个学习的弹窗，我用loadmovie来分割各种对话框，这样主文件就小很多，减少加载大小，但是糟糕的是，有的弹窗里面还要继续loadmovie，这样 load进来的movie 跟主场景的交互 就比较麻烦了……

这条丝绸之路 里面用的东西最多， 视频的运用，loadmovie的运用，问答题的小游戏，还有拼图的游戏……

Funfacts 里是一个相册类的，还好没有分页。。图片数据都是load外部图片，方便修改。

Exhibition Tour 是一个展馆的介绍，里面的小动画跟弹窗就还简单一些。。

它们之间点击后的转场让我也差点喷血，具体原因跟我里面的布局有关。。现在还有点瑕疵，不过总算通过了！算是我用flash的一个阶段总结吧。

相关阅读

]]> http://imouou.com/blog/?feed=rss2&p=407 2 谷歌flash跟踪统计Google Analytics Tracking for Adobe Flash http://imouou.com/blog/?p=399 http://imouou.com/blog/?p=399#comments Fri, 02 Jul 2010 10:11:43 +0000 o仔 http://imouou.com/blog/?p=399 刚刚开发完一个flash整站项目，客户要求要看到用户对flash操作的追踪统计~~囧

http://code.google.com/intl/zh-CN/apis/analytics/docs/tracking/flashTrackingIntro.html

这是官方的使用文档。

我找不到例子，后来找到了教程，做了一个，没啥技术含量，应该会比看官方的省一些时间。目前flash的统计只支持as3，如果你是使用as2的话，就算了，放弃吧。

教程跟例子下载：
Google Analytics for flash教程
google 的跟踪统计 Flash应用例子

随机阅读

]]> http://imouou.com/blog/?feed=rss2&p=399 2 学习jquery笔记(1) http://imouou.com/blog/?p=397 http://imouou.com/blog/?p=397#comments Wed, 09 Jun 2010 10:45:07 +0000 o仔 http://imouou.com/blog/?p=397 最近忙着学习这学习那，很少更新文章了。。在制作的过程中还是遇到了不少以前没遇到过的新鲜的东西。。所以会尝试着把它慢慢整理出来。

下面是我在做jquery 遇到的一些怪异现象。。

jquery学习笔记

1. slideDown(),slideUP(),不支持 tr 的显示隐藏
2.eq() 获取某一个块 很重要
3.index() 获取当前第几个 返回一个数字
4.fadeOut(),fadeIn(), 淡入淡出，中间参数是 数字
5.delay() 延迟 中间是数字
6.removeClass(“”),addClass(“”) 添加删除 样式
7.return function() 返回一个函数
8. animate() 可以模仿已有任何一种动画，相当强大
9.font-weight:bold;会导致 fadeIn() 出现 文本 细体到粗体的变化。只在ie下面有。

随机阅读

]]> http://imouou.com/blog/?feed=rss2&p=397 2 li 不设高度可能导致ie6 ie7 新问题bug http://imouou.com/blog/?p=391 http://imouou.com/blog/?p=391#comments Mon, 26 Apr 2010 12:24:16 +0000 o仔 http://imouou.com/blog/?p=391 li没设高度导致的问题
ie6 ie7 效果图 错误
li没设高度导致的问题
firefox ie8效果图 正确

如上面的图一样，对比一下你会发现右边标题的地方 往下移了 10个像素左右，但是我并没有设置它的margin-top啊，这10个像素左右的位移从哪里来的？ 我发现只要是块元素才会这样，如果是a标签，或者内联元素，就不会了。那我把h3直接改成 inline 元素，应该就可以了啊，但还是没有解决这个问题。。。。h3自带的边距已经清零了。。最后，竟然是因为

没有给 li 设置高度~~ ，不知道算不算 ie6的一个新bug。。ie7也是同样的效果。。以后切记高度莫忘加啊。。不然出现什么怪异现象只会浪费时间。。还是看代码吧。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> li没设高度导致h3块元素上面10px左右的边距 o仔札记 http://imouou.com/blog/</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
body,ul,li,h3,p {margin:0;padding:0;font-size:12px;}
.movie_list {height:auto !important;min-height:100px;padding-top:10px;}
.movie_list li {margin:3px 8px;}
.movie_info h3 {width:400px;height:30px;line-height:25px;overflow:hidden;margin:0;padding:0;}
.movie_list li a img{float:left;width:120px;height:146px;padding:2px;border:1px solid #ccc;margin-right:10px;}
.movie_info {color:#666699}
.movie_info strong {color:#666666;font-weight:normal;}
</style>
</head>

<body>
<div class="movie_list">
	<ul>
		<li>
			<a href="#" ><img src="#" alt=""/></a>
			<div class="movie_info">
			<h3><a href="" title="">这个标题在ie6 ie7下会有上面的边距</a></h3>
			<p><strong>影片主演：</strong></p>
			<p><strong>影片类型：</strong></p>
			<p><strong>发行地区：</strong></p>
			<p><strong>发行时间：</strong></p>
			<p><strong>影片备注：</strong></p>
		</li>
	</ul>
</div>
</body>
</html>

mark 说不会出现这样的情况，难道是我浏览器的问题？

再贴一个简单的例子 ,li不设定高度，旁边只要是块元素，像里面的h3就会往下移~~（bs：代码写得比较懒）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="#" rel="stylesheet" type="text/css" />
<style>
	body,ul,li,h3 {margin:0;padding:0;}
	a img{width:120px;height:140px;float:left;}
	div {width:200px;border:1px solid #ccc;}
</style>
</head>

<body>
<ul>
<li>
	<a href="#"><img src="#"/></a>
	<div>
		<h3>标题</h3>
	</div>
</li>
</ul>
</body>
</html>

原来真不是li的问题，是因为 div .movie_info 没有跟着往左 float 导致的。。当然设置 li高度也可以解决这个问题。而且这个高度是加比较好，如果你要设li的下边框，没有高度是不行的~~

相关阅读

]]> http://imouou.com/blog/?feed=rss2&p=391 9 loading条实现空间占用百分比的CSS http://imouou.com/blog/?p=380 http://imouou.com/blog/?p=380#comments Mon, 26 Apr 2010 02:21:20 +0000 o仔 http://imouou.com/blog/?p=380 loading空间占用百分比

loading空间占用百分比 CSS制作，这个有人也会用于页面加载时候使用。

推荐星级百分比
比较常用于推荐，等级，满意度调查之类的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> o仔札记--http://imouou.com/blog/</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus" />
<style>
	.bar {padding:2px;width:100px;height:8px;border:1px solid #cccccc;}
	.loading {background:#999999;height:8px;width:30%}
</style>
</head>

<body>
	<!--进度条空间占用百分比-->
	<div class="bar">
		<div class="loading"></div>
	</div>
</body>
</html>

loading 百分百条的实现：我们只要获得目前下载的页面大小，除以页面的文件大小，乘以100就可以得到页面的loading进度了，一般页面都是比较小，所以用到也比较少，常用于flash的加载，网页上面的应用，更多的是占用百分比，像QQ的相册空间，给你16Ｍ大小，你目前的用了多少，那只要得到这个比例，控制好 loading的 width 等于百分几，就可以轻松实现了。

上面是一种方法，还有一种比较蠢的方式，就是把百分比切成10块，然后每一个css就控制它百分之10，如果精确到百分之1，那就有得切了，呵呵，所以这种方法一般用来 做等级，推荐度~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> o仔札记--http://imouou.com/blog/</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus" />
<style>
	#star {background:url(images/star.jpg) no-repeat;height:16px;width:70px;}
	.star1 {background:url(images/star.jpg) 0 -18px no-repeat;height:16px;width:70px;}
	.star2 {background:url(images/star.jpg) 0 -34px no-repeat;height:16px;width:70px;}
	.star3 {background:url(images/star.jpg) 0 -52px no-repeat;height:16px;width:70px;}
	.star4 {background:url(images/star.jpg) 0 -70px no-repeat;height:16px;width:70px;}
	.star5 {background:url(images/star.jpg) 0 -85px no-repeat;height:16px;width:70px;}
</style>
</head>

<body>
	<!--五角星等级-->
	<div id="star" class="star2">
	</div>
</body>
</html>

看代码，我们只需要控制 id star 的class样式，star + i 就好了。或者你还有更好的方法~~

本文用到的例子下载 点击这里 空间占用百分比，星级例子

随机阅读

]]> http://imouou.com/blog/?feed=rss2&p=380 2