CSS还提供了 table-layout 属性,以使您的表加载更快。以下是一个例子-
<table style="table-layout:fixed;width:600px;"> <tr height="30"> <td width="150">CSS table layout cell 1</td> <td width="200">CSS table layout cell 2</td> <td width="250">CSS table layout cell 3</td> </tr> </table>
使用传统的HTML,浏览器必须在最终呈现表之前计算每个单元格。但是,当您将表格布局算法设置为 fixed 固定时,它只需要在呈现整个表格之前先查看第一行。这意味着您的表将需要具有固定的列宽和行高。
以下是使用CSS创建简单列布局的步骤-设置完整文档的边距和填充,如下所示:
<style style="text/css"> <!-- body { margin:9px 9px 0 9px; padding:0; background:#FFF; } --> </style>
现在,无涯教程将定义一个黄色的列,然后,将这个规则附加到<div>-
<style style="text/css"> <!-- #level0 { background:#FC0; } --> </style>
到目前为止,将拥有一个带有黄色主体的文档,因此现在在level0内定义另一个分区-
<style style="text/css"> <!-- #level1 { margin-left:143px; padding-left:9px; background:#FFF; } --> </style>
现在,将在level1内再嵌套一个分区,并且将仅更改背景颜色(background color)-
<style style="text/css"> <!-- #level2 { background:#FFF3AC; } --> </style>
最后,将使用相同的技术,在level2内嵌套一个level3分区,以获取右列的视觉布局-
<style style="text/css"> <!-- #level3 { margin-right:143px; padding-right:9px; background:#FFF; } #main { background:#CCC; } --> </style>
如下完成源代码-
<style style="text/css"> body { margin:9px 9px 0 9px; padding:0; background:#FFF; } #level0 {background:#FC0;} #level1 { margin-left:143px; padding-left:9px; background:#FFF; } #level2 {background:#FFF3AC;} #level3 { margin-right:143px; padding-right:9px; background:#FFF; } #main {background:#CCC;} </style> <body> <div id="level0"> <div id="level1"> <div id="level2"> <div id="level3"> <div id="main"> Final Content goes here... </div> </div> </div> </div> </div> </body>
同样,您可以在页面顶部添加顶部导航栏或广告栏。
它将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)