使用CSS创建列布局
要创建列布局,
如下设置整个文档的边距和内边距
<style> <!-- body { margin:9px 9px 0 9px; padding:0; background:#FFF; } --> </style>
定义一个黄色的列,稍后,我们将这个规则附加到<div>-
<style> <!-- #level0 { background:#FC0; } --> </style>
现在让我们在level0内定义另一个除法-
<style> <!-- #level1 { margin-left:143px; padding-left:9px; background:#FFF; } --> </style>
再嵌套一个分区,完整的代码将如下所示:
<style> 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>