-
网页div布局|单列布局-宽度自适应-内容居中
- 作者:灰牛站长•发布时间:2021-07-21 10:07:20•浏览
基本思路:
- 头部,尾部单独放在一个独立的容器中,仅设置高度即可
- 头部,底部的内容区仍然和主体等宽
- 主体仍放在一个单独的容器中,并设置水平居中
- CSS样式不用修改,只需要调整一个DOM结构
HTML结构
<div class="header"> <div class="container">头部</div> </div> <div class="main"> <div class="container">主体</div> </div> <div class="footer"> <div class="container">底部</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>
相关文章
-
基本思路: 左右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