Html 盒子模型布局及栅栏化 - Luca_LJX

时间:2024-03-04 09:43:25

 一、HTML常用盒子模型

 一般的HTML页面布局依次拥有以下几个板块:

      页头header、滚动图片banner、主体部分main、页脚footer

  其中页头包含logo及导航栏nav,主体部分左右排布分为左侧content主题内容板块及右侧sideBar侧边栏板块。

  一般整个页面需要放入容器container中,以便调节居中、背景等样式。

  以下是常用的div布局:  

  <body>
    <div class="container"><!--整个页面主体-->
      <div class="header"><!--页面上部页头-->
        <div class="nav"><!--头部导航栏-->
        </div>
      </div>
      <div class="banner"></div><!--页头下面的一个滚动图片位置-->
      <div class="main"><!--页面主体-->
        <div class="content"><!--内容-->
        </div>
        <div class="sideBar"><!--侧边栏-->
        </div>
      </div>
      <div class="footer"></div><!--页脚-->
    </div>
  </body>

  二、栅栏化

  栅栏化布局可以很方便适配div盒子所占宽度的比例,一般用grid进行命名。

  如将某一div分为1:4的两块。可用以下代码:

  <style type="text/css">
    .content{
      background-color: green;
      width: 960px;
      height: 600px;
      margin: 0 auto;
    }
    .aa1{
      background-color: red;
      height: 300px;
      float: left;
    }
    .aa2{
      background-color: blue;
      height: 400px;
      float: left;
    }
    .grid1{
      width: 20%;
    }
    .grid4{
      width: 80%;
    }
  </style>

  <body>
    <div class="content">
      <div class="aa1 grid1">aa1</div>
      <div class="aa2 grid4">aa2</div>
    </div>
  </body>

  

  其中,grid的作用就是栅栏化后,按比例给div块横向切分,然后设置其宽度。