页面效果展示如下：
<!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;}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。