MENU

CSS布局-双飞翼和圣杯布局

双飞翼布局

1.主要的内容先加载的优化;
2.兼容所以的主流浏览器,包括IE6;
3.经测试不需要多余代码,能兼容所以的窗口大小。
其实就是三栏布局,中间main看作主体,left、right是翅膀,这个布局的思路是所有的部分都需要浮动,左右两边用margin位移自己的空间值。

  • HTML结构
<div class="main">
    <!-->主体的内容一定要另外新建一个div创建<-->
    <div class="main-inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
  • 主体、左、右都设置浮动,主题占比整个屏幕100%,左右两边随便你设置,但是要注意margin相同的值,最后使用main里面的div marign掉左右两边的值,让遮罩掉的内容显示出来。
/*每个区块都设置浮动,高度随意*/
.main,
.right,
.left{
text-align: center;
float: left;
height: 200px;
}
/*让主体充满整个屏幕*/
.main{
width: 100%;
}
/*这个是展示主题的容器,一定要marign掉多余的空间*/
.main-inner{
height: 200px;
margin: 0 30% 0 20%;
background: rgba(200,153,255,1);
}
/*设置了多少的宽度,就需要用多少的margin值*/
.right{
margin-left:  -30%;
width: 30%;
background: yellow;
}
/*同理*/
.left{
margin-left: -100%;
width: 20%;
background: red;
}

圣杯布局

1.左右两栏最好是固定值(如果设置百分比左右会有空隙);
2.圣杯布局添加了多余代码。但是省略了里面包裹的那个div。

  • HTML结构
<div class="app">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
  • 样式表
/*如果窗口缩小到足够小,板块会有调动。所以最好给body设置一个最小值*/
body{
padding: 0;
margin: 0;
min-width: 700px;
}
/*每个区块都设置浮动,高度随意*/
.main,
.right,
.left{
text-align: center;
position: relative;
float: left;
height: 200px;
}
/*让大盒子padding内容,实际上就是为了让main里面的内容展示出来,核心代码在这里。*/
.app{
padding: 0 220px 0 200px;
overflow: hidden;
}
/*让main主体内容百分百*/
.main{
width: 100%;
background: rgba(200,153,255,1);

}
/*设置了多少的宽度,就需要用多少的margin值,但是还需要用相对定位来位移,让它到自己合适的位置*/
.right{
right: -220px;
margin-left: -220px;
width: 220px;
background: yellow;
}
/*同理*/
.left{
left: -200px;
margin-left: -100%;
width: 200px;
background: red;
}
最后编辑于: 2018 年 04 月 16 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码