使用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>

以上是 使用CSS创建列布局 的全部内容, 来源链接: utcz.com/z/317031.html

回到顶部