19 网页常见的3种布局
作者：互联网
1 单列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
margin: 0;
height: 100%;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #000;
}
.container{
width: 1200px;
margin: 0 auto;
}
.header .container{
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
background-color: red;
}
.footer{
width: 100%;
height: 100px;
}
.footer .container{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
<div class="container">头部</div>
</div>
<div class="wrap">
<div class="container">主题内容</div>
</div>
<div class="footer">
<div class="container">尾部</div>
</div>
</body>
</html>
2 两列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
margin: 0;
height: 100%;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #000;
}
.container{
width: 1200px;
margin: 0 auto;
}
.header .container{
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
background-color: red;
}
.wrap .left{
width: 10%;
height: 100%;
float: left;
background-color: yellowgreen;
}
.wrap .right{
width: 90%;
height: 100%;
float: right;
background-color: orchid;
}
.footer{
width: 100%;
height: 100px;
}
.footer .container{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
<div class="container">头部</div>
</div>
<div class="wrap">
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="footer">
<div class="container"></div>
</div>
</body>
</html>
3 多列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
margin: 0;
height: 100%;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #000;
}
.container{
width: 1200px;
margin: 0 auto;
}
.header .container{
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
}
.wrap .left{
width: 10%;
height: 100%;
float: left;
background-color: yellowgreen;
}
.wrap .right{
width: 10%;
height: 100%;
float: right;
background-color: orchid;
}
.wrap .center{
height: 100%;
background-color: purple;
margin: 0 130px;
}
.footer{
width: 100%;
height: 100px;
}
.footer .container{
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
<div class="container">头部</div>
</div>
<div class="wrap">
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center">lxx</div>
</div>
</div>
<div class="footer">
<div class="container"></div>
</div>
</body>
</html>
标签：网页,width,19,100%,布局,height,color,background,container 来源： https://www.cnblogs.com/it-lkp/p/16553717.html