典型页面布局

一般典型的页面布局分为头部header、内容体content、底部footer,头部和footer为通用的，内容content可以放置不同类型的文档内容。

典型的页面html结构如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>测试页面</title>
</head>
<body>
  <div class="main">
      <div id="header">头部</div>
      <div id="content">内容区</div>
      <div id="foot">底部</div>
  </div>
</body>
</html>

主要css定义文件如下

 html,body {
            margin: 0;
            padding:0; height: 100%;
        }
        .main {
            min-height:100%;
            height: auto !important;
            height: 100%; /*IE6不识别min-height*/
            position: relative;

        }
        #header {
            padding: 10px;
            height: 50px;
            background-color: #30303B;
            line-height: 66px;
        }
#content {
            position: relative;
            padding-top: 108px;
            width: 1000px;
            margin: 0 auto;
            padding-bottom: 64px;/*等于footer的高度*/
        }
#foot {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 64px;/*脚部的高度*/ background: #6cf;
            clear:both;
        }

 

这样就可以看到一个典型的布局页面了

鉴于目前前端主要使用单页面应用的方式进行开发，采用模块化思维，其实基本原理是一致的。主要是将头部header和底部footer提取成单独的组件即可。样式同样可以借鉴上面书写的样式。

posted @ 2018-11-15 17:09  开尔  阅读(423)  评论(0)  编辑  收藏  举报