PHP
·
发表于 5年以前
·
阅读量:8398
对于三栏布局来说,左右两栏一般放置目录等简要信息,中间一栏是主要信息。页面加载时,用户最希望第一时间看到的是中间一栏内容,所以根据文档流加载顺序(从上到下),中间一栏必须放在左右两栏的前面。而实际布局需要将中间一栏居中放置,所以在布局的时候就稍有不同,这是就需要用到圣杯布局。
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="header">Header</div>
<div class="container">
<div class="center">Center</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
index.css代码
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666;height:30px;clear:both;}
.container{
padding-left:150px;
padding-right:200px;
}
.left{
background: #34934D;
width:150px;
float:left;
margin-left:-100%;
position: relative;
left:-150px;
}
.center{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #EF4400;
width:200px;
float:left;
margin-left:-200px;
position:relative;
right:-200px;
}