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