网页布局
2016-09-04 本文已影响11人
huhu502
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
/* css初始化 */
/* *{
margin: 0;
padding: 0;
} */
h1,h2,h3,h4,h5,h6,body{
margin: 0;
padding: 0;
}
.box{
width: 980px;
height: 700px;
background-color: #DBDBE0;
margin: 0 auto;
}
.header{
height: 50px;
background-color: black;
}
.container{
height: 600px;
background-color: pink;
}
.content{
width: 680px;
height: 600px;
background-color: #1351EF;
float: left;
}
.sidebar{
width: 300px;
height: 600px;
background-color: green;
float: left;
}
.footer{
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<!-- 主体盒子 -->
<div class="box">
<!-- 头部 -->
<div class="header"></div>
<!-- 内容部分 -->
<div class="container">
<!-- 内容左侧 -->
<div class="content"></div>
<!-- 内容右侧 -->
<div class="sidebar"></div>
</div>
<!-- 尾部 -->
<div class="footer"></div>
</div>
</body>
</html>
