三剑数码工作室—南县网站建设,南县视频制作
三剑数码
三剑简介
三剑信念
三剑团队
三剑作品
三剑文集
联系我们
留言三剑
文档资料

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

添加时间:2009/2/1   浏览次数:540
 
 
 本教程是利用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 {
    width:405px;
    margin:50px auto;
}

  ID为biaoge的ul的CSS编码,宽度为405px(一列100px*4列+li的边距),上下边距为50px,左右为自动,实现水平居中对齐。

#biaoge li,#biaoge li.biaotou {
    list-style-type:none;
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    float:left;
    margin-left:1px;
    margin-bottom:1px;
    background:#ccc;
}

  对各个列表项li(即单元格)进行样式定义,设置列表项预设标记为无,宽度与高度分别是100px、30px,为了让文字垂直居中于li中,设置行高为30px,文字水平居中。设置为向左浮动,并且左边距与底边距均为1px,实现了简单的表格线的效果。(如果设计成border的表格线,很多CSS HACK很难控制与调整,特别是FF中极不正常,不建议使用border来实现这类ul+li实现表格线的定义!)设置背景色为浅灰色#ccc。

#biaoge li.biaotou {
    background:#999;
}

  我们设置四个“表头”li的背景色为深灰色#999,与其它的li区别开来。我们的样式定义基本就完成了。你可以在色彩上对它进行一些其它的美化。

  最后我们再次声明,表格类的数据最好是用表格来实现,符合WEB标准不必拘泥于完全不用表格,只是在适当的情况下,可以使用此案例的方法来实现类似于表格的布局。

  运行下面代码可以查看演示效果:

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
Copyright © 三剑数码工作室 地址:南县南洲镇永红路 电话:13874325683