等高布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
body,p{margin: 0;}
.parent{
position: relative;
}
.center{
box-sizing:border-box;
padding: 0 20px;
background-clip: content-box;
border-left: 210px solid lightblue;
border-right: 310px solid lightgreen;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 300px;
}
</style>
</head>
<body>
<div class="parent" style="background-color: lightgrey;">
<div class="left">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>
双飞翼布局
- header和footer各自占领屏幕所有宽度,高度固定。
- 中间的container是一个三栏布局。
- 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。
- 中间部分的高度是三栏中最高的区域的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
* {
padding: 0;
margin: 0;
}
header,
footer {
text-align: center;
width: 100%;
background-color: #bbbbbb;
}
.text {
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
.bd {
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.main-content {
margin: 0 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
}
</style>
</head>
<body>
<header>双飞翼布局</header>
<div class="bd">
<div class="main text">
<div class="main-content">main</div>
</div>
<div class="left text">
left
</div>
<div class="right text">
right
</div>
</div>
<footer style:"clear:both">footer</footer>
</body>
</html>
圣杯布局
和双飞翼实现的是同一种布局,区别在于实现的方式不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
</head>
<style type="text/css">
body{
min-width: 550px;
}
*{
margin:0;
padding: 0;
}
.header , .footer{
background: gray;
width: 100%;
}
.footer{
clear: both;
}
.main{
height: 200px;
padding: 0 150px 0 200px;
background: greenyellow;
*zoom: 1;
}
.left , .center , .right{
float: left;
}
.center{
width: 100%;
height: 200px;
background: red;
}
.left {
width: 200px;
height: 200px;
background: yellow;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 150px;
height: 200px;
background: gainsboro;
margin-left: -150px;
position: relative;
left: 150px;
}
</style>
<body>
<div class="header">
头部
</div>
<div class="main">
<div class="center">中间中间中间中间中间中间中间后</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
底部
</div>
</body>
</html>