<!DOCTYPE html>
<html>
<head>
<title>CSS和HTML结合方式</title>
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置头部*/
.header{
/*设置宽度*/
widths: 1000px;
/*width: 100%;*/
/*设置高度*/
height: 50px;
/*设置背景颜色*/
background-color: #a2e0e9;
/*设置居中（上下外边距为0，左右外边距最大为居中）*/
margin: 0 auto;
}
.header2{
/*设置宽度*/
widths: 1000px;
/*width: 100%;*/
/*设置高度*/
height: 80px;
/*设置背景颜色*/
background-color: white;
/*设置居中（上下外边距为0，左右外边距最大为居中）*/
margin: 0 auto;
}
/*设置主体内容*/
.content{
/*设置宽度*/
widths: 1000px;
/*设置高度*/
height: 500px;
/*设置背景颜色*/
background-color: white;
/*设置居中*/
margin: 10px auto;
}
.left{
width: 200px;
height: 80%;
background-color: white;
/*向左浮动*/
float: left;
}
.center{
width: 850px;
height: 100%;
background-color: white;
float: left;
/*上下外边距为0，左右各10px*/
margin: 0 10px;
}
.up{
width: 1100px;
height: 70%;
background-color: darkblue;
}
/*设置底部信息*/
.footer{
/*设置宽度*/
widths: 1000px;
/*设置高度*/
height: 50px;
/*设置背景颜色*/
background-color: white;
/*设置居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 头 -->
</div>
</div>
<!-- 主体内容 -->
</div>
</div>
</div>
</div>
</div>
<!-- 底部信息 -->
</div>
</body>
</html>
