双飞翼代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列双飞翼</title>
<style type="text/css">
/** {
margin:0;
padding: 0;
}*/
.header ,.footer {
width: 100%;
height: 80px;
background-color: #CDCDCD;
}
.content{
width: 900px;
min-height: 100%;
background-color: #7C7C7C;
margin:0 auto;
text-align: center;
line-height: 80px;
}
.main {
width: 900px;
/*height: 460px;*/
/*border: 2px dashed red;*/
overflow: hidden;
/*当元素内的内容溢出的时候使它隐藏溢出的部分*/
margin:auto;
/*水平居中*/
}
.center{
/* width: 100%;*/
height: 460px;
margin:0 200px;
/*margin-left: 200px;
margin-right: 200px;*/
background-color: #78C567;
/*padding:0 200px;*/
}
.wrap{
width: 100%;
float: left;
}
.left{
width: 200px;
height: 460px;
float: left;
background-color: #EEFF11;
margin-left: -100%;
}
.right{
width: 200px;
height: 460px;
float: left;
background-color: #F44040;
margin-left: -200px;
}
.footer {
clear: both;
}
</style>
</head>
<body>
<!-- dom结构 -->
<!-- 头部 -->
<div class="header">
<div class="content">头部</div>
</div>
<!-- 内容 -->
<div class="main">
<div class="wrap">
<div class="center">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<!-- 尾部 -->
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
/** {
margin:0;
padding: 0;
}*/
.header ,.footer {
width: 100%;
height: 80px;
background-color: #CDCDCD;
}
.content{
width: 900px;
min-height: 100%;
background-color: #7C7C7C;
margin:0 auto;
text-align: center;
line-height: 80px;
}
.main {
width: 500px;
height: 460px;
/*border: 2px dashed red;*/
overflow: hidden;
/*当元素内的内容溢出的时候使它隐藏溢出的部分*/
margin:auto;
/*水平居中*/
padding:0 200px;
}
.center{
width: 100%;
height: 460px;
float: left;
/*margin:0 200px;*/
/*margin-left: 200px;
margin-right: 200px;*/
background-color: #78C567;
/*padding:0 200px;*/
}
.left{
width: 200px;
height: 460px;
float: left;
background-color: #EEFF11;
margin-left: -100%;
position: relative;
top: 0;
left: -200px;
}
.right{
width: 200px;
height: 460px;
float: left;
background-color: #F44040;
margin-left: -200px;
position: relative;
top: 0;
right: -200px;
}
.footer {
clear: both;
/*清除浮动*/
}
</style>
</head>
<body>
<!-- dom结构 -->
<!-- 头部 -->
<div class="header">
<div class="content">头部</div>
</div>
<!-- 内容 -->
<div class="main">
<div class="center">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<!-- 尾部 -->
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
