啦啦啦啦～我又来了。
我好了，我走了。
今天记录一下学习的成果，架构化的网页。
效果：
emmm，大概就是这个样子吧。
直接看代码了，代码中注视了所有的问题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型测试</title>
<style class="text/css">
body {
height: 100%;
width:100%;
display: block;
}
#wrapper {
/*主栏外框*/
float: left;
/*向左浮动*/
width: 100%;
/*设置宽度能够自动适应*/
margin-left: -200px;
/*向左留出适当距离，给导航栏*/
background: rgb(77, 76, 76);
/*设置颜色*/
}
#content {/*主栏内框*/
margin-left: 200px;
/*左侧外边距，正值缩进*/
background: rgb(189, 187, 187);
color: rgb(59, 255, 255);/*字体颜色*/
font-size: 18px;/*字体大小*/
}
#navigation {/*导航栏*/
float: right;
width: 200px;
background: rgb(105, 103, 103);
color: rgb(253, 158, 16);
}
#extra {/*其他栏*/
float: right;
clear: right;
width: 200px;
background: rgba(75, 75, 75, 0.089);
color: rgb(253, 158, 16);
}
#footer {/*页脚栏*/
clear: both;
width: 100%;
background: rgb(154, 214, 233);
color: rgb(59, 79, 255);
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>页眉部分</h1>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1.主体内容</strong></p>
<p>十指流玉</p>
<p>来女装</p>
<p>来女装来女装</p>
<p>来女装来女装来女装</p>
<p>来女装来女装来女装来女装</p>
<p>来女装来女装来女装来女装来女装</p>
<p>来女装来女装来女装来女装来女装来女装</p>
<p>来女装来女装来女装来女装来女装来女装来女装</p>
<p>来女装来女装来女装来女装来女装来女装来女装来女装</p>
</div>
</div>
<div id="navigation">
<p><strong>2.导航内容</strong></p>
</div>
<div id="extra">
<p><strong>3.其他</strong></p>
</div>
<div id="footer">
<p>4.页脚部分</p>
</div>
</div>
</body>
</html>这种效果如果将网页放大时，网页的元素会根据放大自动调整网页的显示，但是网页的结构不会发生变化。但是有时候你定不想实现这种效果，那么就需要将宽度设置为固定的px类型，而不是100%样式。
效果：
可以看到放大之后出现滚动条可以进行滚动显示。这样效果就实现了。
代码：
其实就是多加了一个样式而已：
/*将上面的代码做如下修改即可*/
<style calss="text/css">
/*添加*/
#center{
margin-left: auto;
margin-right: auto;
text-align: left;
border:solid 1px red;
width:1550px;
}
</style>
<!--修改-->
<body id="center">