基本思路:
- 页面的头部,主体,底部全部放在一个容器中统一设置
- 容器中的子块只需要设置一下高度即可
HTML结构
<div class="container"> <div class="header">头部</div> <div class="main">主体</div> <div class="footer">底部</div> </div>
CSS样式
<style type="text/css"> .container{ max-width: 960px;/*设置最大宽度为960px*/ margin: 0 auto;/*设置内部的块级元素水平居中*/ } .header{ height: 50px; background-color: aqua } .main{ height: 600px; background-color: royalblue } .footer{ height: 50px; background-color: saddlebrown } </style>
转载请注明:大灰牛博客 » 网页响应式布局|单列布局-上中下等宽