月光软件站 - 编程文档 - 网站制作 - 用DIV+CSS实现传统的只有TABLE才能实现的细线网格

网站制作

本类阅读TOP10

·IIS 安装配置全攻略
·html基础学习笔记（2）
·html基础学习笔记（1）
·用VS.NET打开网上下载的.NET web项目出错的解决办法
·如何在网页上实现进度条
·限制TextArea区的文字输入数量
·HTML 4.0 语言快速参考
·在weblogic上配置SSL
·页面垂直居中的两种方法
·Zope/Plone内容管理系统的探讨与应用－内容管理系统（CMS）的概述

→ 分类导航

VC语言	Delphi
VB语言	ASP
Perl	Java
Script	数据库
其他语言	游戏开发
文件格式	网站制作
软件工程	.NET开发

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

作者：未知来源：月光软件站 加入时间：2005-2-28　月光软件站

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

相关文章：

相关软件：