css常用布局方式,绝对定位布局,双飞翼布局,圣杯布局
绝对定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绝对定位布局</title>
<!-- 添加定位父级，左右先绝对定位，中间用外边距撑开 -->
<style type="text/css">
.box1 {
width:100%;
height:60px;
background-color:#ccc;
}
.box1-1 {
width:1000px;
min-height:100%;
background-color:#999;
margin:auto;
}
.box2 {
width:1000px;
height:650px;
margin:auto;
position:relative; /* 定位父级 */
}
.box2-1 {
width:200px;
min-height:100%;
position:absolute; /* 绝对定位 */
top:0;
left:0;
background-color:#99ccff;
}
.box2-2 {
width:250px;
min-height:100%;
position:absolute;
top:0;
right:0;
background-color:#99ff99;
}
.box2-3 {
height:650px;
margin:0 250px 0 200px;
background-color:#ffcccc;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1-1">box1-1</div>
</div>
<div class="box2">
<div class="box2-1">box2-1</div>
<div class="box2-3">box2-3</div>
<div class="box2-2">box2-2</div>
</div>
<div class="box1">
<div class="box1-1">box1-1</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>双飞翼布局</title>
<!-- 主体加父级 宽设置100% 全体浮动，左右设置外边距为负值，主体再设置外边距 -->
<style type="text/css">
.box1 {
width:100%;
height:60px;
background-color:#ccc;
}
.box1-1 {
width:1000px;
min-height:100%;
background-color:#999;
margin:auto;
}
.box2 {
width:1000px;
margin:auto;
background-color:#99cc66;
overflow:hidden; /* 包住浮动块 */
}
.box2-1 {
width:100%;
background-color:#999966;
float:left;
}
.box3 {
min-width:100%;
height:650px;
background-color:#ffcccc;
margin:0 250px 0 200px;
}
.box2-2 {
width:200px;
min-height:650px;
float:left;
margin-left:-100%;
background-color:#99ccff;
}
.box2-3 {
width:250px;
min-height:650px;
float:left;
margin-left:-250px;
background-color:#99ff99;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1-1">top box-1</div>
</div>
<div class="box2">
<div class="box2-1">
<div class="box3">box3</div>
</div>
<div class="box2-2">box2-2</div>
<div class="box2-3">box2-3</div>
</div>
<div class="box1">
<div class="box1-1">foot box-1</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>圣杯布局</title>
<!-- 主体区设置固定宽度，子块全部浮动，设置外边距为负值，padding撑开父元素，左右设置相对定位 -->
<style type="text/css">
.box1 {
width:100%;
height:60px;
background-color:#ccc;
}
.box1-1 {
width:1000px;
min-height:100%;
margin:auto;
background-color:#999;
}
.box2 {
width:550px;
margin:auto;
overflow:hidden; /* 包住浮动块 */
padding:0 250px 0 200px;
}
.box2 .box2-1 {
width:100%;
min-height:650px;
background-color:#ffcccc;
float:left;
}
.box2 .box2-2 {
width:200px;
min-height:650px;
float:left;
background-color:#99ccff;
margin-left:-100%;
position:relative;
left:-200px;
}
.box2 .box2-3{
width:250px;
min-height:650px;
float:left;
background-color:#99ff99;
margin-right:-250px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1-1">box1-1</div>
</div>
<div class="box2">
<div class="box2-1">box2-1</div> <!-- 主体区必须要先写 -->
<div class="box2-2">box2-2</div>
<div class="box2-3">box2-3</div>
</div>
<div class="box1">
<div class="box1-1">box1-1</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写
