DIV CSS实现列表样式

2007-12-02 01:52:28 作者：dream 来源：dream 浏览次数：0 网友评论 0 条

突然想用DIV+CSS实现列表页的显示,就从网上找了一些资料,以下为实现细节:

li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。

源码如下:

<style>
/*CSS整体布局声明，边距为零，填充为零，文字大小为12px，文字颜色为黑色#000；*/
* {
 margin:0;
 padding:0;
 font-size:12px;
 color:#000;<
 }
/*ID为biaoge的ul的CSS编码，宽度为405px（一列100px*4列+li的边距），上下边距为50px，左右为自动，实现水平居中对齐。
*/
#biaoge {
 width:405px;
 margin:50px auto;
}
/*对各个列表项li（即单元格）进行样式定义，设置列表项预设标记为无，宽度与高度分别是100px、30px，为了让文字垂直居中于li中，设置行高为30px，文字水平居中。设置为向左浮动，并且左边距与底边距均为1px，实现了简单的表格线的效果。（如果设计成border的表格线， 很多CSS HACK很难控制与调整，特别是FF中极不正常，不建议使用border来实现这类ul+li实现表格线的定义！）设置背景色为浅灰色#ccc。*/
#biaoge li,#biaoge li.biaotou {
 list-style-type:none;
 width:100px;
 height:30px;
 line-height:30px;
 text-align:center;
 float:left;
 margin-left:1px;
 margin-bottom:1px;
 background:#ccc;
}
/*我们设置四个“表头”li的背景色为深灰色#999，与其它的li区别开来。*/
#biaoge li.biaotou {
 background:#999;
 }
</style>
<ul id="biaoge">
<!--前四个列表项我们赋予了类biaotou。因为这四个项是表格头部，应该与表格数据有所区别。-->
 <li class="biaotou">第一列</li>
 <li class="biaotou">第二列</li>
 <li class="biaotou">第三列</li>
 <li class="biaotou">第四列</li>
 <li>数据1-1</li>
 <li>数据1-2</li>
 <li>数据1-3</li>
 <li>数据1-4</li>
 <li>数据2-1</li>
 <li>数据2-2</li>
 <li>数据2-3</li>
 <li>数据2-4</li>
 <li>数据3-1</li>
 <li>数据3-2</li>
 <li>数据3-3</li>
 <li>数据3-4</li>
 <li>数据4-1</li>
 <li>数据4-2</li>
 <li>数据4-3</li>
 <li>数据4-4</li>
</ul>

最后我们再次声明:

表格类的数据最好是用表格来实现，符合WEB标准并不是完全不用表格，只是在适当的情况下，可以使用此案例的方法来实现类似于表格的布局.