1.双飞翼布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
float:left;
width:100%;
}
.left{
background:red;
float:left;
margin-left:-100%;
width:300px;
height:100px;
}
.right{
background:yellow;
float:left;
margin-left:-300px;
width:300px;
height:100px;
}
.center{
background: blue;
margin-left:300px;
margin-right:300px;
height: 100px;
}
</style>
</head>
<body>
<!--双飞翼实现三栏布局，首先加载中间部分-->
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>2.圣杯布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
.container{
margin-left:300px;
margin-right:300px;
}
.left{
background:red;
position:relative;
float:left;
width:300px;
height:100px;
margin-left:-100%;
left:-300px;
}
.right{
background:yellow;
position:relative;
float:left;
margin-left:-300px;
right:-300px;
width:300px;
height:100px;
}
.center{
float:left;
background: blue;
width:100%;
height: 100px;
}
</style>
</head>
<body>
<!--圣杯布局实现三栏布局，首先加载中间部分-->
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦