共计 1242 个字符，预计需要花费 4 分钟才能阅读完成。
页面成果展现如下：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title> 网页布局 </title></head>
<link rel=”stylesheet” href=” 网页布局.css”>
<body>
<div class=”top”>
top</div>
<div class=”banner”>
banner</div>
<div class=”box”>
<div class="up">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>
<div class="down">
<div class="a">5</div>
<div class="b">6</div>
<div class="c">7</div>
<div class="d">8</div>
</div></div>
<div class=”footer”>
footer</div>
</body>
</html>
css 代码：
- {
padding: 0;
margin: 0;
}
.top {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
background-color: pink;}
.banner {
margin: 10px auto;
width: 1200px;
height: 200px;
line-height: 200px;
background-color: skyblue;
text-align: center;}
.box {
width: 1200px;
height: 510px;
margin: 0 auto 10px auto;}
.box .up>div {/子代选择器 /
width: 292.5px;/ 能够用总宽度减去 margin-left 的值而后除以小 box 数，最初一个 box 再为 0 /
height: 150px;
line-height: 150px;
text-align: center;
margin-right: 10px;
float: left;
background-color: purple;}
.box .up .four {
margin-right: 0;}
.box .down>div {
height: 350px;
margin-top: 10px;
width: 292.5px;
margin-right: 10px;
float:left;
line-height: 350px;
text-align: center;
background-color: greenyellow;}
.box .down .d {
margin-right: 0;}
.footer {
width: 100%;
height: 250px;
line-height: 250px;
text-align: center;
background-color: #5141dd;}
正文完