要建立列佈局,
如下設定整個文件的邊距和填入
<style> <!-- body { margin:9px 9px 0 9px; padding:0; background:#FFF; } --> </style>
定義一個黃色的列,稍後,我們將此規則附加到-
<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>
以上是使用 CSS 建立列佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!