css复杂的列表布局
复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目，而且不能兼容IE和FireFox。这个问题困扰了我几个晚上，今天终于搞定了。在IE和FireFox中测试几乎一模一样。
源码下载：
先看效果图：这是模仿闪客帝国的作品排行榜。
实现代码：
程序代码
注意：
1、如果在测试写代码时DW展示出来的比较乱，大多原因是对象的属性没有写全，比如没有宽度高度的设定，没有右浮动等。这在列表布局中尤其重要。
2、此处使用了css hack技术，以解决浏览不兼容问题。如在对象前加顶极选择符[xmlns]，只被非IE浏览器识别。当然前提是html标签已经加上了xmlns属性：
<html xmlns="http://www.w3.org/1999/xhtml">
当然还有其它方法来实现，我们放在以后的教程中陆续讲解。
3、#top10 li.t1 h1{}而不是#top10 li .t1 h1{}，中间空一下，表示的是对象的上下级关系。而t1是作为类出现的，li.t1 h1表示类为ti的列表下的h1子对象。
4、几个对象想在同行显示的话，可用span选择符，span选择符也可以重复嵌套。如果并非在同行显示的话，尽量不要用span选择符，这时的div选择符就派上了用场。因为之前我们也说过，这两种选择符默认的显示方式分别为：行间内联和块状显示。
源码下载：
先看效果图：这是模仿闪客帝国的作品排行榜。
实现代码：
程序代码<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>步步为营，实战div+css系列教程--chaojibaby.com--</title>
</head>
<style tpye="text/css">
<!--
a{color:#349DEF;text-decoration:none;}
a:hover{color:#F1B246;text-decoration: underline}
h2 a {color:#ff0000;}
.t1 h1{color:#ff0000;}
#paihang{width:220px;background-color:#EDF0F3;padding:10px 5px;}
[xmlns] #paihang{height:300px;width:230px;} /*此处运用了css hack技术：对象前加[xmlns]只被非IE浏览器识别*/
.tit_bg{position:relative;left:10px; background-repeat:no-repeat;float:left;}
.tit_txt{float:left;padding-left:20px;font-size:15px;font-weight:bold;color:#5442C0;}
.more{float:right;padding:1px;}
#top10{float:left;margin:0px;padding:10px 5px 0px 5px;background-color:#fff;list-style-type:none;width:220px;}/*对于ul对象，一定要设定宽度*/
#top10 .topimg{float:left;padding-left:2px;margin:0px;}/*此处类前不能加li,否则不正常，涉及到列表与div的关系*/
#top10 h1,#top10 h3{font-size:12px;font-weight:normal;float:left;}
#top10 h2{font-size:12px;}
#top10 li.t1 h1{clear:right;width:126px;border-bottom:1px #33ccff dashed;margin:0px;padding:8px 5px 3px 5px;font-weight:bold;}
#top10 li.t1 h2{float:left;display:block;margin:10px 5px;;font-weight:normal;width:90px;}
#top10 li.t1 h3{float:left;display:block;color:#ff0000;clear:right;margin:10px 0px;padding-left:5px;border-left:2px solid #ff0000;}
#top10 li.t2,#top10 li.t3,#top10 li.t4{float:left;border-top:1px dashed #349DEE;background-image:url(arrow_t1.gif);background-repeat:no-repeat;background-position:0px 65%; margin:0px 0px 0px 5px;line-height:22px;}
#top10 li.t2 h1,#top10 li.t3 h1,#top10 li.t4 h1{float:left;color:#349DEF;clear:left;width:155px;padding-left:25px;margin:0px;}
#top10 li.t2 h3,#top10 li.t3 h3,#top10 li.t4 h3{float:left;color:#349DEF;padding-left:5px;margin:0px 0px 0px 0px ;}
-->
</style>
<body>
<div id="paihang">
<div class="title">
<span class="tit_bg"><img src="tit_bg.gif" /></span>
<span class="tit_txt">中国娱乐排行榜</span>
<span class="more"><img src="tit_more.gif" alt="浏览更多信息" longdesc="#" /></span>
</div>
<div id="top10">
<li class="t1">
<div class="topimg"><img src="t1_img.gif" alt="孙燕姿" longdesc="#" /></div>
<h1><a href="#">明天我就要嫁给你了</a></h1>
<h2><a href="http://www.chaojibaby.com/">歌手：超级宝贝</a></h2>
<h3>1267</h3>
</li>
<li class="t2">
<h1><a href="#">十年</a></h1>
<h3>847</h3>
</li>
<li class="t3">
<h1><a href="#">兰花草</a></h1>
<h3>634</h3>
</li>
<li class="t4">
<h1><a href="#">海浪（女生版）</a></h1>
<h3>598</h3>
</li>
<li class="t4">
<h1><a href="#">亲爱的你在哪里</a></h1>
<h3>548</h3>
</li>
<li class="t4">
<h1><a href="#">信仰（真情版）</a></h1>
<h3>439</h3>
</li>
<li class="t4">
<h1><a href="#">红豆8过火</a></h1>
<h3>324</h3>
</li>
<li class="t4">
<h1><a href="#">相亲相爱--九天</a></h1>
<h3>287</h3>
</li>
<li class="t4">
<h1><a href="#">爱你一万年</a></h1>
<h3>156</h3>
</li>
<li class="t4">
<h1><a href="#">亲爱的你在哪里</a></h1>
<h3>67</h3>
</li>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>步步为营，实战div+css系列教程--chaojibaby.com--</title>
</head>
<style tpye="text/css">
<!--
a{color:#349DEF;text-decoration:none;}
a:hover{color:#F1B246;text-decoration: underline}
h2 a {color:#ff0000;}
.t1 h1{color:#ff0000;}
#paihang{width:220px;background-color:#EDF0F3;padding:10px 5px;}
[xmlns] #paihang{height:300px;width:230px;} /*此处运用了css hack技术：对象前加[xmlns]只被非IE浏览器识别*/
.tit_bg{position:relative;left:10px; background-repeat:no-repeat;float:left;}
.tit_txt{float:left;padding-left:20px;font-size:15px;font-weight:bold;color:#5442C0;}
.more{float:right;padding:1px;}
#top10{float:left;margin:0px;padding:10px 5px 0px 5px;background-color:#fff;list-style-type:none;width:220px;}/*对于ul对象，一定要设定宽度*/
#top10 .topimg{float:left;padding-left:2px;margin:0px;}/*此处类前不能加li,否则不正常，涉及到列表与div的关系*/
#top10 h1,#top10 h3{font-size:12px;font-weight:normal;float:left;}
#top10 h2{font-size:12px;}
#top10 li.t1 h1{clear:right;width:126px;border-bottom:1px #33ccff dashed;margin:0px;padding:8px 5px 3px 5px;font-weight:bold;}
#top10 li.t1 h2{float:left;display:block;margin:10px 5px;;font-weight:normal;width:90px;}
#top10 li.t1 h3{float:left;display:block;color:#ff0000;clear:right;margin:10px 0px;padding-left:5px;border-left:2px solid #ff0000;}
#top10 li.t2,#top10 li.t3,#top10 li.t4{float:left;border-top:1px dashed #349DEE;background-image:url(arrow_t1.gif);background-repeat:no-repeat;background-position:0px 65%; margin:0px 0px 0px 5px;line-height:22px;}
#top10 li.t2 h1,#top10 li.t3 h1,#top10 li.t4 h1{float:left;color:#349DEF;clear:left;width:155px;padding-left:25px;margin:0px;}
#top10 li.t2 h3,#top10 li.t3 h3,#top10 li.t4 h3{float:left;color:#349DEF;padding-left:5px;margin:0px 0px 0px 0px ;}
-->
</style>
<body>
<div id="paihang">
<div class="title">
<span class="tit_bg"><img src="tit_bg.gif" /></span>
<span class="tit_txt">中国娱乐排行榜</span>
<span class="more"><img src="tit_more.gif" alt="浏览更多信息" longdesc="#" /></span>
</div>
<div id="top10">
<li class="t1">
<div class="topimg"><img src="t1_img.gif" alt="孙燕姿" longdesc="#" /></div>
<h1><a href="#">明天我就要嫁给你了</a></h1>
<h2><a href="http://www.chaojibaby.com/">歌手：超级宝贝</a></h2>
<h3>1267</h3>
</li>
<li class="t2">
<h1><a href="#">十年</a></h1>
<h3>847</h3>
</li>
<li class="t3">
<h1><a href="#">兰花草</a></h1>
<h3>634</h3>
</li>
<li class="t4">
<h1><a href="#">海浪（女生版）</a></h1>
<h3>598</h3>
</li>
<li class="t4">
<h1><a href="#">亲爱的你在哪里</a></h1>
<h3>548</h3>
</li>
<li class="t4">
<h1><a href="#">信仰（真情版）</a></h1>
<h3>439</h3>
</li>
<li class="t4">
<h1><a href="#">红豆8过火</a></h1>
<h3>324</h3>
</li>
<li class="t4">
<h1><a href="#">相亲相爱--九天</a></h1>
<h3>287</h3>
</li>
<li class="t4">
<h1><a href="#">爱你一万年</a></h1>
<h3>156</h3>
</li>
<li class="t4">
<h1><a href="#">亲爱的你在哪里</a></h1>
<h3>67</h3>
</li>
</div>
</div>
</body>
</html>
注意：
1、如果在测试写代码时DW展示出来的比较乱，大多原因是对象的属性没有写全，比如没有宽度高度的设定，没有右浮动等。这在列表布局中尤其重要。
2、此处使用了css hack技术，以解决浏览不兼容问题。如在对象前加顶极选择符[xmlns]，只被非IE浏览器识别。当然前提是html标签已经加上了xmlns属性：
<html xmlns="http://www.w3.org/1999/xhtml">
当然还有其它方法来实现，我们放在以后的教程中陆续讲解。
3、#top10 li.t1 h1{}而不是#top10 li .t1 h1{}，中间空一下，表示的是对象的上下级关系。而t1是作为类出现的，li.t1 h1表示类为ti的列表下的h1子对象。
4、几个对象想在同行显示的话，可用span选择符，span选择符也可以重复嵌套。如果并非在同行显示的话，尽量不要用span选择符，这时的div选择符就派上了用场。因为之前我们也说过，这两种选择符默认的显示方式分别为：行间内联和块状显示。
