您的位置：首页 > 其它

页面布局（圣杯，双飞翼)

2017-11-15 11:55 106 查看

常见布局：grid，flex，绝对定位，圣杯及双飞翼布局。

圣杯布局

<!-- 圣杯布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.con {
padding: 0px 190px 0px 150px;
overflow: auto;
}

.left {
background: #E79F6D;
width: 150px;
float: left;
position: relative;
left: -150px;
margin-left: -100%;
/*left: -100%;*/
/*margin-left: -150px;*/
}

.main {
background: #D6D6D6;
width: 100%;
float: left;
}

.right {
background: #77BBDD;
width: 190px;
float: left;
position: relative;
margin-left: -190px;
right: -190px;
/*left: 190px;*/
}
</style>
</head>
<body>
<div class="con">
<div class="main">
<div style="background-color: #1fe6e8;width:200px">
nihaollelelel
</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>

双飞翼布局

<!-- 双飞翼布局 -->
<!DOCTYPE html>
<html>
<head>
<style>
.left{
background: #E79F6D;
width:150px;
float:left;
margin-left: -100%;
}
.main{
background: #D6D6D6;
width:100%;
float:left;
}
.mc {
margin-left: 150px;
margin-right: 190px;
}
.right{
background: #77BBDD;
width:190px;
float:left;
margin-left: -190px;
}

</style>

</head>
<body>
<div class="con">
<div class="main">
<div class="mc">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 布局

相关文章推荐

新的分享

章节导航