DIV CSS网页布局实例解析：实现表格形式

日期：2007年7月12日作者：查看:[大字体中字体小字体]

　　本教程是利用DIV+Css的UL LI实现表格的形式的一种方法，也就是说在标准前提下可以实现表格的形式的。

　　表格的数据，就应该使用表格来组织，不是说制作符合WEB标准的网站，表格就一无是处、彻底下岗了。表格类的数据，它有着得天独厚的条件，也非常方便组织。这类数据内容直接使用表格就可以了。

　　或许你认为你的数据并不是表格式的数据，还有着其它的用法或你自己的见解，我们也可以用ul、li来实现表格形式的布局。

　　我们首先分析一下如何制作：li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：

<ul id="biaoge">
    <li class="biaotou">第一列</li>
    <li class="biaotou">第二列</li>
    <li class="biaotou">第三列</li>
    <li class="biaotou">第四列</li>
    <li>数据1-1</li>
    <li>数据1-2</li>
    <li>数据1-3</li>
    <li>数据1-4</li>
    <li>数据2-1</li>
    <li>数据2-2</li>
    <li>数据2-3</li>
    <li>数据2-4</li>
    <li>数据3-1</li>
    <li>数据3-2</li>
    <li>数据3-3</li>
    <li>数据3-4</li>
    <li>数据4-1</li>
    <li>数据4-2</li>
    <li>数据4-3</li>
    <li>数据4-4</li>
</ul>

　　一个无序列表biaoge，前四个列表项我们赋予了类biaotou。因为这四个项是表格头部，应该与表格数据有所区别。所以单独赋予了类，可以方便控制。下面我们开始CSS代码的编写：

* {
    margin:0;
    padding:0;
    font-size:12px;
    color:#000;
}

　　CSS整体布局声明，边距为零，填充为零，文字大小为12px，文字颜色为黑色#000；

#biaoge {
[1] [2] [3] 下一页
DIV CSS网页布局实例解析：实现表格形式相关文章：
·DIV CSS网页布局实例解析：实现表格形式
DIV CSS网页布局实例解析：实现表格形式相关软件

上一篇:PHP程序指定目录里的指定后缀名文件为超连接

下一篇:网页设计中如何让CSS控制网页背景？

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

DIV CSS网页布局实例解析：实现表格形式

精品推荐

热点TOP10

特别推荐