用DIV+CSS实现传统的只有TABLE才能实现的细线网格

最新推荐文章于 2022-06-02 17:52:31 发布

qihboy

最新推荐文章于 2022-06-02 17:52:31 发布

阅读量1.8k

点赞数

分类专栏： XHMTL CSS 文章标签： div table css class border float

本文链接：https://blog.csdn.net/qihboy/article/details/166330

版权

XHMTL CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

昨天在网页设计区看到一个人问到这个问题,接着就出现了很多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>