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

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航