用DIV+CSS实现传统的只有TABLE才能实现的细线网格_css 给div设置成类似table的线-优快云博客

博主在网页设计区看到有人问问题，针对TABLE的拥护者，写了DIV+CSS实现网页效果的样例。因在公司用服务器，未用其他浏览器测试，运行环境为WIN2K AD SERVER + IE6.0，并给出代码让保存为HTML文件查看效果。

昨天在网页设计区看到一个人问到这个问题,接着就出现了很多TABLE的誓死拥护者,看不惯,就写了一个样例给他们看,让他们看看DIV+CSS是如何实现的,并且是如何的明了的,由于本人现在在公司用的是服务器,还没有自己的专用机(新来的嘛),所以也就没有其它浏览器进行测试,我目前的运行环境是WIN2K AD SERVER + IE6.0,代码如下,你可以保存为一个HTML文件,再打开看看效果

<html>
<head>
<style>
!--
.rows {
 display:block
 border-bottom:#000 1px solid;
}
.rows ul {
 list-style:none;
 display:block;
 margin:0px;
}
.rows li {
 width:100px;
}
.leftli {
 float:left;
 border:#000 1px solid;
 border-right:0px;
 border-bottom:0px;
 margin-right:-2px;
 padding:2px 10px 2px 10px;
}
.rightli {
 border:#000 1px solid;
 border-bottom:0px;
 padding:2px 10px 2px 10px;
}
.b-leftli {
 float:left;
 border:#000 1px solid;
 border-right:0px;
 margin-right:-2px;
 padding:2px 10px 2px 10px;
}
.b-rightli {
 border:#000 1px solid;
 padding:2px 10px 2px 10px;
}
-->
</style>
</head>
<body>
<div class="rows">
<ul>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="rightli">456</li>
</ul>
<ul>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="rightli">def</li>
</ul>
<ul>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="rightli">DEF</li>
</ul>
<ul>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="rightli">456</li>
</ul>
<ul>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="rightli">def</li>
</ul>
<ul>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="rightli">DEF</li>
</ul>
<ul>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="rightli">456</li>
</ul>
<ul>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="rightli">def</li>
</ul>
<ul>
 <li class="b-leftli">ABC</li>
 <li class="b-leftli">ABC</li>
 <li class="b-leftli">ABC</li>
 <li class="b-leftli">ABC</li>
 <li class="b-rightli">DEF</li>
</ul>
</div>
</body>
</html>