在这之前你需要掌握的:
aside标签代表左右导航栏,article代表中间正文区域.hearder和footer代表上下栏.
margin: 0 0 0 0; 分别距离上下左右内容多少.
使用%描述页面长宽时,布局会随着页面的改变改变.
使用绝对值px,会导致在不同设备上,展示的网页会有所差异.
三栏布局例:
<body>
<header>
<h3>头部区域</h3>
</header>
<div>
<aside class="left"><!-- 则边栏 -->
<h3>左边导航栏</h3>
</aside>
<article class="middle">
<h3>中间正文区域</h3>
</article>
<aside class="right">
<h3>右侧导航栏</h3>
</aside>
</div>
<footer>
<h3>底部区域</h3>
</footer>
</body>*{
padding: 0;
margin: 0;
}
header,footer{
height: 40px;
width: 100%;/* 分成100份 */
background: #ccc;
text-align: center;
}
div{
height: 800px;
border: 1px double darkblue;
}
.left,.right{
position: absolute;
height:800px; /*??px是绝对大小,改变窗口会产生影响*/
top: 40px;
background: #ff69b4;
}
.left{
width: 20%;
left: 0;
}
.right{
width: 20%;
right: 0;
}
.middle{
height:800px;
width: 60%;
margin: 0 0 20% 20%;
background: #659;
}