What you need to know before doing this:
The aside tag represents the left and right navigation bars, article represents the middle text area. hearder and footer represent the upper and lower bars.
margin: 0 0 0 0; How much is the distance from the top, bottom, left, and right content respectively.
When % is used to describe the page length and width, the layout will change as the page changes.
Using an absolute value of px will result in differences in the displayed webpages on different devices.
Three-column layout example:
<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;
}