页面常见布局
单列布局、两列布局、三列布局
页面通常都会分为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>
原创文章 88
获赞 66
访问量 6万+