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 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦