![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：布局之前, 很画草图, 理好思路是个好习惯, 边写边想反而更慢...
当然熟练了可以一气呵成
Collection
Collection
简单的方法实现页面三列布局，左侧边栏宽度设为200px,使用position: absolute; top: 0; left: 0; bottom: 0;属性让左边栏固定在左侧！右侧边栏同样设置为200px，使用position: absolute; top: 0; right: 0; bottom: 0;将右侧边栏固定在右侧！
主体内容区域，main设置宽度宽度为100%，左右内边距都设置为200px，这样主体区域的文字不会被两侧边栏遮盖！因为main自身设置的宽度是100%，再加上左右两侧内边距宽度变成了100% + 左侧200px +右侧200px ，宽度超出了显示窗口的宽度，浏览器下方会出现滚动条！
可以给main增加box-size:border-box;属性，消除内边距对main整体宽度的影响，消除下方滚动条！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现页面三列布局</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style>
* {
padding: 0;
margin: 0;
font-size: 1rem;
}
body {
padding-top: 50px;
height: 2000px;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
float: left;
}
a {
display: block;
padding: 0 15px;
float: left;
text-decoration: none;
line-height: 50px;
color: #f2f2f2;
}
a:hover {
background: #333333;
color: #FFF;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
padding: 0 15px;
box-sizing: border-box;
background: #000000;
z-index: 100;
}
.logo {
width: 200px;
height: 50px;
position: absolute;
left: 0;
padding: 0 15px;
box-sizing: border-box;
line-height: 50px;
}
.logo h1 {
color: #FFF;
font-size: 20px;
color: greenyellow
}
.left {
position: absolute;
left: 200px;
}
main {
width: 100%;
height: 800px;
background: #0000FF;
box-sizing: border-box;
position: relative;
padding: 0 220px;
}
main>aside:first-child {
width: 200px;
background: #ADFF2F;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
main>aside:last-child {
width: 200px;
background: #ADFF2F;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<nav>
<div class="logo">
<h1>HTML5三列布局</h1>
</div>
<ul class="left">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">视频教程</a>
</li>
<li>
<a href="">入门教程</a>
</li>
<li>
<a href="">社区问答</a>
</li>
<li>
<a href="">技术文章</a>
</li>
<li>
<a href="">资源下载</a>
</li>
</ul>
</nav>
<main>
<!-- 左侧边栏 -->
<aside>
这里是左边,使用绝对定位固定在左边
</aside>
<!-- center 中间区域 -->
<article>
这里是中间区域
</article>
<!-- 右侧边栏 -->
<aside>
这里是右边,使用绝对定位固定在右边
</aside>
</main>
</body>
</html>点击 "运行实例" 按钮查看在线实例
