使用 CSS 创建列布局

百变鹏仔 3个月前 (09-20) #CSS

文章标签布局

要创建列布局，

按如下方式设置整个文档的边距和填充

<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 创建列布局

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写