什么是布局
...
现有的样式不能满足人们的需求
- 文档流
- 浮动
- 定位
人们需要： - 导航栏+内容
- 导航栏+内容+广告栏
- 从上到下、从左到右、定宽、自适应......
单列布局
单列布局.png
实现方式 定宽+水平居中
width: 1000px; //或 max-width: 1000px;
margin-left: auto;
margin-right: auto;
几种范例 可供参考
布局说明 ：上下+main是自适应 aside 固定宽高
范例代码如下 ：
<style>
.layout{
max-width:560px;
margin:0 auto;
}
.header{
height:50px;
background:pink;
}
.content{
position:relative;
}
.content .aside{
position:absolute;
right:0;
width:100px;
height:300px;
background:blue;
}
.content .main{
margin-right:110px;/*设置main的右margin为 aside宽度+10px*/
background:red;
height:300px;
}
.footer{/*自适应导航栏 不设宽度 那么宽度就是layout设置的总宽度*/
height:50px;
background:#ccc;
}
</style>
<div class="layout">
<div class="header">头部自适应</div>
<div class="content">
<div class="aside">旁边（固定宽高）</div>
<div class="main">内容自适应</div>
</div>
<div class="footer">尾部</div>
</div>
效果图如下 ：
单列布局范例.png
下面几种比较简单 记住一点 自适应没有宽度（width）限制 只有高度（height） 或者 自身没有 只有全局设置多宽
<style>
body{
/* min-width: 960px; */
}
.layout{
width: 600px;
margin: 0 auto;
border: 1px solid;
}
#header{
height: 60px;
background: red;
min-width: 600px;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
我疑惑地地方 尾部 footer 应该是和内容一样宽啊 为什么会和头部一样呢 */
早上想通了 头部和尾部 子元素都是600px宽 而包裹他的父元素没有设置宽 所以 会自适应
效果图如下
单列布局通栏.png
范例二
<style>
.layout{
width:960px;
margin:0 auto;
}
.header{
height:50px;
background:pink;
}
.content{
height:300px;
background:red;
}
.footer{
height:50px;
background:blue;
}
</style>
<div class="header">头部</div>
<div class="content layout">内容</div>
<div class="footer layout">尾部</div>
效果图如下
范例二.png
双列布局
一列固定宽度，另外一列自适应宽度
双列布局示意图.png
两栏布局时注意加载顺序
右侧固定 左侧及尾部自适应布局 注意代码加载顺序！！！！
范例如下
<style>
.layout{
max-width:960px;
margin:0 auto;
}
.content:after{
content:'';
display:block;
clear:both;
}
.content .aside{
float:right;
width:200px;
height:200px;
background:pink;
}
.content .main{
height:400px;
background:red;
margin-right:210px;
}
.footer{
height:50px;
background:#ccc;
}
</style>
<div class=" content layout">
<div class="aside">右侧固定</div>
<div class="main">左侧自适应</div>
</div>
<div class="footer layout">尾部自适应</div>
效果图如下
两栏布局 右侧固定.png
范例代码二 两栏及尾部都是自适应
<style>
.layout:after{
content:'';
display:block;
clear:both;
}
.aside{
float:right;
width:30%;
height:200px;
background:pink;
}
.main{
width:70%;
height:400px;
background:red;
}
.footer{
background:#ccc;
}
</style>
<div class="layout">
<div class="aside">自适应</div>
<div class="main">也是自适应</div>
</div>
<div class="footer">尾部</div>
效果图如下
两栏自适应布局.png
