頁面常見佈局
單列布局、兩列布局、三列布局
頁面通常都會分爲header、wrapper、footer三個部分
單列布局
<!DOCTYPE html>
<html>
<head>
<title>單列布局</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<style type="text/css">
html,body{
/*寬度，高度100%代表與頁面同寬同高*/
width: 100%;
height: 100%;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
/*行高也能撐起整個盒子*/
text-align: center;
background-color: black;
}
.container{
/*container只設置寬度，保證內容部分水平居中即可*/
margin:0 auto;
width: 1200px;
}
.header .container{
/*
通常container不設置頁面高度，頁面高度由內層元素決定。*/
height: 60px;
background-color: red;
}
.wrapper{
width: 100%;
height: 100%;
}
.wrapper .container{
height: 100%;
background-color: yellow;
}
.foot{
width: 100%;
height: 60px;
}
.foot .container{
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
頭部內容區域
</div>
</div>
<div class="wrapper">
<div class="container">
中心內容區域
</div>
</div>
<div class="foot">
<div class="container">
尾部內容區域
</div>
</div>
</body>
</html>
盒子高度默認是盒子中元素高度，如文字高度。文字的行高即代表文字的高度
兩列布局
利用左右浮動，實現兩列布局
<!DOCTYPE html>
<html>
<head>
<title>兩列布局</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: black;
}
.container{
margin:0 auto;
width: 1200px;
}
.header .container{
height: 60px;
background-color: red;
}
.wrapper{
width: 100%;
height: 100%;
}
.wrapper .container{
height: 100%;
/*background-color: yellow;*/
}
.wrapper .container .left{
width:10%;
height: 100%;
float: left;
background-color:purple;
}
.wrapper .container .right{
/*可以留一點做空隙，也可以不留，左邊10%，右邊90%*/
width:89%;
height: 100%;
float: right;
background-color: yellowgreen;
}
.foot{
width: 100%;
height: 60px;
}
.foot .container{
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
頭部內容區域
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="left">
</div>
<div class="right"></div>
</div>
</div>
<div class="foot">
<div class="container">
尾部內容區域
</div>
</div>
</body>
</html>
三列布局
三列布局時，中間部分無需設置浮動，只需要設置左右兩邊的margin，width就能自動調整到合適的寬度，形成三列布局
<!DOCTYPE html>
<html>
<head>
<title>三列布局</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: black;
}
.container{
margin:0 auto;
width: 1200px;
}
.header .container{
height: 60px;
background-color: red;
}
.wrapper{
width: 100%;
height: 100%;
}
.wrapper .container{
height: 100%;
/*background-color: yellow;*/
}
.wrapper .container .left{
width:10%;
height: 100%;
float: left;
background-color:purple;
}
.wrapper .container .right{
width:10%;
height: 100%;
float: right;
background-color: yellowgreen;
}
.wrapper .container .center{
/*width:80%;*/
height: 100%;
margin:0 130px;
/*不要設置寬度，用外邊距來限制盒子的範圍*/
background-color: blue;
}
.foot{
width: 100%;
height: 60px;
}
.foot .container{
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
頭部內容區域
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="left">
</div>
<div class="right"></div>
<div class="center"></div>
<!-- 注意center必須放在後面，因爲浮動元素脫標，center盒子就可以擠上去。
否則右邊浮動的盒子就不會再中心區域，而是在下一行浮動 -->
</div>
</div>
<div class="foot">
<div class="container">
尾部內容區域
</div>
</div>
</body>
</html>