<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*消除瀏覽器自帶的偏移*/
*{
margin: 0;
padding: 0;
}
/*margin-left: auto;
margin-right: auto;保證居中*/
.wrapper{
width: 960px;
margin-left: auto;
margin-right: auto;
color: black;
background: #000000;
font-size: 30px;
text-align: center;
overflow-x: hidden;
}
/*-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
這三句話保證佈局不會被打破*/
.header{
height: 100px;
background: blue;
margin-bottom: 10px;
padding: 10px;
border: 10px solid red;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.sidebar{
float: left;
width: 220px;
margin-right: 20px;
margin-bottom: 10px;
height: 300px;
background: blueviolet;
padding: 10px;
border: 10px solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content{
float: left;
width: 720px;
height: 300px;
background: aqua;
margin-bottom: 10px;
padding: 10px;
border: 10px solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.footer{
background: aliceblue;
height: 100px;
clear: both;
padding: 10px;
border: 10px solid red;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">頁眉</div>
<div class="sidebar">側邊欄</div>
<div class="content">主內容</div>
<div class="footer">頁腳</div>
</div>
</body>
</html>
