列表的设计可简可繁，而网站上的大部分列表应用大多数都以简单为主，主要一些标题而用，但是不乏会出现一些较复杂的应用，将介绍在闪客帝国网站上出现阴个非常具有特点的列表应用。
在闪客帝国首页出现的作品爬行榜列表应当说是一种相当复杂的列表设计，不如说是借助于列表的一种图文排版。笔者在当时采用CSS实现这样一个设计莳移中，花了很多时间。对于这样一个列表的设计，有以下几点需求：天津网站建设，天津网站制作
首先要放置从1-10十个作品的名称与当前的访问量；其次，要求每个作品都必从1-10，而为了实现较好的视觉效果，要求序号必须采用图片；对于第一个作品，除了名称与访问量之外，还要求出现图片与作者；对于前1，2，3，4名作品，它的背景色也因为及名次而出现从深到浅的丰富变化。
面对这些要求，列表已经变得相当复杂，然尔如何利用我们现在的CSS布局条件去实现，而且简单易行呢？通过对设计稿的分析我们能够知道有以下几点可以入手：
除了第一个内容之外，其他的内容都具有部分相同的特征，排除标题不说，它们的形式都是标题距左，访问量距右；
针对第一个项目，必须有特殊的CSS样式；天津网站制作，塘沽网站建设，天津网站设计
针对2，3，4三个项目，需要改变其背景色；
针对所有项目要采用不同图片作为标题，因此肯定需要不同的class或id名称。
可以看到，在第一个li中，使用div来放置图片，hl表示标题，h2表示作者，h3表示访问量。而在其他的li之中只有hl与h3，并对每一个n设置了tl，t2，谩这样的class，不．在实际代码中只需要设置到t4即可，因为从第5个项目开始将延用相同风格。而img标签用于插入带有编号的图片，最终实现这样效果的关键代码如下。对于所有li中的表示编号的图片，我们采取向左浮动，并带有上边距，使图片都处于左侧的固定位置：
而对于第一个项目，由于其结构较为复杂，单独使用浮动式布局已经不能很好的达到控制效果，因此在对于士l中的各子对象的控制，我们采用了部分进行相对定位的方式，使各对象能够相对于tl的整个li进行对齐，从而实现最终的布局效果。由于本例中的代码并没有完整列出实现整个列表的CSS代码，有兴趣的读者可以直接访问闪客帝国网站来查看完整的源代码。
实现实际上是ul与排版的结合，ul本身的设计是相当简单方便的，而有时候我们也必须在ul的各个项目之中应用一些图文排版的技术，就如本例中的列表一样的效果。