自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:主页 > 前端开发 > HTML|CSS代码 >

网页div布局|单列布局-宽度自适应-内容居中

作者:灰牛站长•发布时间:2021-07-21 10:07:20•浏览

基本思路:

  1. 头部,尾部单独放在一个独立的容器中,仅设置高度即可
  2. 头部,底部的内容区仍然和主体等宽
  3. 主体仍放在一个单独的容器中,并设置水平居中
  4. 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>

相关文章

手机端