如何实现圣杯布局和双飞翼布局?(PC端常见—使用float的经典布局)
圣杯布局和双飞翼布局的目的:
- ① 三栏布局,中间一栏最先加载和渲染(内容最重要)
- ② 两侧内容固定,中间内容随着宽度自适应(不管屏幕放大缩小,中间内容都是自适应)
- ③ 一般用于PC网页
圣杯布局和双飞翼布局的技术总结:
- ① 使用float布局
- ② 两侧使用margin负值,以便和中间内容横向重叠
- ③ 防止中间内容被两侧覆盖,一个用padding,一个用margin
圣杯布局:
核心代码演示:
初始化:
<!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>Document</title>
<style>
body{
/*最小宽度*/
min-width:550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#center {
background-color: #ccc;
width: 100%;
}
#left{
background-color: yellow;
width: 200px;
}
#right{
background-color: red;
width: 150px;
}
#footer{
text-align: center;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div id="header">this is header</div>
<div id="container">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>
初始化效果:
设置浮动:
#container .column{
float: left;
}
footer去浮动:
#footer{
clear: both;
text-align: center;
background-color: #f1f1f1;
}
设置padding:
#container{
padding-left:200px;
padding-right:150px;
}
左边:margin-left: -100%;
#left {
background-color: yellow;
width: 200px;
margin-left: -100%;
}
往左移动,挤多宽呢?container整个宽度,挤到最左侧后,挤上去了,因为有padding,所以先到达center的最右边,然后因为margin-left: -100%;回到center最左边
左边添加相对定位,right:200px;
#left {
position:relative; /*相对于自身移动*/
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
右边margin-right:-150px;
#right {
background-color: red;
width: 150px;
margin-right: -150px;
}
双飞翼布局:
初始化:
<!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>Document</title>
<style>
body{
min-width: 550px;
}
#main{
width: 100%;
height: 200px;
background-color: #ccc;
}
#left{
width: 190px;
height: 200px;
background-color: #0000FF;
}
#right{
width: 190px;
height: 200px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>
初始效果:
浮动:
.col{
float: left;
}
左右侧预留空白:双飞翼布局用margin,圣杯布局用padding:
#main-wrap{
margin: 0 190px 0 190px;
}
左侧marin-left:-100%;
#left{
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%;
}
如果右侧margin-right:-190px;则不是我们想要的效果:
#right{
width: 190px;
height: 200px;
background-color: #FF0000;
margin-right: -190px;
}
正确是:margin-left:-190px;
#right{
width: 190px;
height: 200px;
background-color: #FF0000;
margin-left: -190px;
}
总的来说,比较推荐双飞翼布局!!!,比较简单
手写clearfix:
回到圣杯布局中,删掉footer里面的clear:both:
#footer {
text-align: center;
background-color: #f1f1f1;
}
footer重叠上去,淹没了
针对container,手写clearfix:
/* 手写clearfix */
.clearfix:after{
content:''; /*内容*/
display:table;
clear:both;
}
兼容ie低版本写法:可以写,可以不写
/* 手写clearfix */
.clearfix:after{
content:''; /*内容*/
display:table;
clear:both;
}
.clearfix {
*zoom: 1; /*兼容IE低版本*/
圣杯布局源代码:
<!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>Document</title>
<style>
body {
min-width: 550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
position:relative; /*相对于自身移动*/
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right {
background-color: red;
width: 150px;
margin-right: -150px;
}
#footer {
text-align: center;
background-color: #f1f1f1;
}
/* 手写clearfix */
.clearfix:after{
content:''; /*内容*/
display:table;
clear:both;
}
</style>
</head>
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>
双飞翼布局源代码:
<!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>Document</title>
<style>
body{
min-width: 550px;
}
.col{
float: left;
}
#main{
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap{
margin: 0 190px 0 190px;
}
#left{
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%;
}
#right{
width: 190px;
height: 200px;
background-color: #FF0000;
margin-left: -190px;
}
</style>
</head>
<body>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>