源码下载：
先看效果图：这是模仿闪客帝国的作品排行榜。
实现代码：
<!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 >亲爱的你在哪里</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 >亲爱的你在哪里</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选择符就派上了用场。因为之前我们也说过，这两种选择符默认的显示方式分别为：行间内联和块状显示。