欢迎来到天天文库
浏览记录
ID：23533329
大小：56.00 KB
页数：5页
时间：2018-11-08
《用div+css网页标准实现表格形式的数据排列》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、用DIV+CSS网页标准实现表格形式的数据排列>>edu.5151doc.教育资源库 本教程是利用DIV+CSS的ULLI实现表格的形式的一种方法，也就是说在标准前提下可以实现表格的形式的。 表格的数据，就应该使用表格来组织，不是说制作符合L代码的编写：<ulid="biaoge"><liclass="biaotou">第一列</li><liclass="biaotou">第二列</li><liclass="biaotou">第三列</li><liclass="biaotou">第四列
2、</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><
3、;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{argin:50pxauto;}
4、 ID为biaoge的ul的CSS编码，宽度为405px（一列100px*4列+li的边距），上下边距为50px，左右为自动，实现水平居中对齐。#biaogeli,#biaogeli.biaotou{list-style-type:none;argin-left:1px;margin-bottom:1px;background:#ccc;} 对各个列表项li（即单元格）进行样式定义，设置列表项预设标记为无，宽度与高度分别是100px、30px，为了让文字垂直居中于li中，设置行高为30px，文字水平居中。设置为向左浮动，并且左边距与
5、底边距均为1px，实现了简单的表格线的效果。（如果设计成border的表格线，很多CSSHACK很难控制与调整，特别是FF中极不正常，不建议使用border来实现这类ul+li实现表格线的定义！）设置背景色为浅灰色#ccc。#biaogeli.biaotou{background:#999;} 我们设置四个“表头”li的背景色为深灰色#999，与其它的li区别开来。我们的样式定义基本就完成了。你可以在色彩上对它进行一些其它的美化。 最后我们再次声明，表格类的数据最好是用表格来实现，符合L1.0Transitional//EN"".l
6、1/DTD/xhtml1-transitional.dtd"><htmlxmlns=".l"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>.argin:0;padding:0;font-size:12px;color:#000;}#biaoge{argin:50pxauto;}#biaogeli,#biaogeli.biaotou{list-style-type:none;argin-left:1px
7、;margin-bottom:1px;background:#ccc;}#biaogeli.biaotou{background:#999;}</style></head><body><ulid="biaoge"><liclass="biaotou">第一列</li><liclass="biaotou">第二列</li><liclass="biaotou">第三列</li><liclass="biaotou">第四列</li><li>数据1-1</li>
8、<li>数据1-2</li><li>数据1-3</li><li>数据1-4</li><li>数据2-1</li><li>数据2-12下一页[这篇文章来自
此文档下载收益归作者所有
