<!DOCTYPE html>
<html>
<head>
<title>项目测试</title>
<style type="text/css">
/* 设置头部*/
.header{
width: 80%;
height: 80px;
background-color: red;
margin-bottom: 50px;
}
.zuo{
width: 30%;
height: 80px;
background-color: gray;
float: left;
}
.zhong{
width: 30%;
height: 80px;
background-color: orange;
}
.you{
width: 30%;
height: 80px;
background-color: yellow;
}
.da{
width: 100%;
height: 80px;
background-color: pink;
margin: 10px auto;
}
.content{
width: 100%;
height: 450px;
background-color: black;
margin: 50px auto;
}
.shang{
width: 100%;
height: 50px;
background-color: purple;
}
.footer{
width: 1000px;
height: 150px;
background-color: silver;
/*设置居中 上下外边距为0，左右外边框最大*/
margin: 0 auto;
}
/* 清除默认样式*/
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--头-->
<div class="header">
<div class="zuo"></div>
<div class="zhong"></div>
<div class="you"></div>
</div>
<div class="da"></div>
<!--主体内容-->
<div class="content">
<div class="shang">
</div>
</div>
<!--底部信息-->
<div class="footer"></div>
</body>
</html>
