-
网页响应式布局|单列布局-上中下等宽
- 作者:灰牛站长•发布时间:2021-07-21 10:02:24•浏览
基本思路:
- 页面的头部,主体,底部全部放在一个容器中统一设置
- 容器中的子块只需要设置一下高度即可
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>
上一篇:代码技巧之常用快捷键的整理 下一篇:网页div布局|单列布局-宽度自适应-内容居中
相关文章
-
基本思路: 左右2列采用绝对定位来布局 中间内容部分采用margin挤压出来 HTML结构 div class="container"div class="left"左侧/divdiv class="right"右侧/divdiv class="main"主体...2021-07-21 10.07.20
-
基本思路: 和2列布局很相似 左右2列采用浮动+宽度 中间区域实际是用margin挤压出来的 DOM顺序不能写乱,必须先写左右再写中间 HTML结构 div class="left"左侧...2021-07-21 10.07.07
-
基本思路: 给2列添加一个定位的父集区块,并设置定位属性,一般设置为相对定位 给左右2个区块分别使用绝对定位 父集区块/定位父集必须设置宽度width...2021-07-21 10.07.57
-
基本思路: 要给左右2列添加一个父集区块 要给左右2个区块设置一个浮动:left/right 给父区块添加一个after伪类让子块撑开父集 HTML结构 div class="container clear...2021-07-21 10.07.07
-
基本思路: 左侧固定,并设置为左浮动 右侧主体部分设置一个左边距,它的宽度只要大于等于左侧的宽度就可以 HTML结构 div class="right"右侧/divdiv class="main"主体...2021-07-21 10.07.48