目录
圣杯布局
一般用于PC端的网页布局
目的:1.两侧内容宽度固定,中间宽度自适应
2.三栏布局,中间内容最先加载,渲染出来
使用方法:float和margin
margin给负值的意思是宽度缩减多少
注意点:1.footer清除浮动 2.margin负值的使用 3.posotion:relative的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
min-width: 500px;
}
div{
text-align: center;
}
#header{
background-color:#eee
}
#content{
padding-left: 300px;
padding-right: 200px;
}
#content #center{
background-color:#595959;
width:100%
}
#content #right{
background-color:green;
width: 200px;
margin-right: -200px;
}
#content #left{
position: relative;
background-color:indianred;
width: 300px;
margin-left: -100%;
right: 300px;
}
#footer{
/*清除浮动*/
clear:both;
background-color:#595959;
}
#content .column{
float: left;
}
</style>
</head>
<body>
<h1>实现圣杯布局</h1>
<div id="header">Header</div>
<div id="content">
<div id="center" class="column">Center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
background-color: #dddddd;
width: 100%;
}
#main #main-wrapper{
margin-left: 100px;
margin-right: 50px;
}
#left{
margin-left: -100%;
background-color: #1890FF;
width: 100px;
}
#right{
/* margin-left 向左拖拽*/
margin-left: -50px;
background-color: #E74405;
width: 50px;
}
.column{
float: left;
}
</style>
</head>
<body>
<h1>双飞翼布局</h1>
<div id="main" class="column">
<div id="main-wrapper">Main</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</body>
</html>