圣杯布局小结

圣杯布局小结

2016/01/30 · HTML5 · 1
评论 ·
圣杯布局

原稿出处: 流云诸葛   

圣杯布局,比较久从前就听过,不过一贯都没详细摸底过,最近因为做了二个连串,借鉴了薪人薪事这几个集团的出品页面,才第二次用到这种布局情势。于是就花了点时间,测了下它完结普遍分栏布局的代码,每段代码都特别轻便,但布局功用很完美,比作者原先用的法门好用非常多。本文是对它落成方式的有个别计算,希望得以把这种才干引入给跟本人事先同一对它相比较不熟悉的开拓人士:)

1. 从2个实在的要求谈起

今年有2个项目,都以管制体系的花色,那体系型的分界面特点基本都以左侧面栏展现菜单,左边凸显网页主体仍然是最上端的导航栏展现菜单,导航栏以下显示网页主体,我那五个体系都以第一种等级次序:

项目一:

图片 1

项目二:

图片 2

在做项目一的时候,选取了原先做ERP软件的有的做法,侧边的网页主体区域放置的是三个iframe,用来显示每一种菜单点击之后的页面,那样各样菜单点击之后,外界页面都不会刷新,何况滚动也只发生在iframe里面,外界页面包车型大巴菜单区域和顶端导航栏的场合始终不会变动,客商操作起来极度省事。这种界面布局的做法特别轻松,只要侧面栏和网页主体区域都接纳一定定位就可以:

<div class=”sidebar”></div> <div
class=”page-content”></div> .sidebar { position: absolute;
width: 200px; left: 0; bottom: 0; top: 50px; border-right: 1px solid
#E7E7E7; } .page-content { position: absolute; left: 205px; bottom: 0;
top: 50px; right: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="sidebar"></div>
<div class="page-content"></div>
 
.sidebar {
    position: absolute;
    width: 200px;
    left: 0;
    bottom: 0;
    top: 50px;
    border-right: 1px solid #E7E7E7;
}
 
.page-content {
    position: absolute;
    left: 205px;
    bottom: 0;
    top: 50px;
    right: 0;
}

是因为这一个类型是八个里边项目,所以使用这种分界面结构完全部都以足以承受的,毕竟那只是三个管理种类,能够不那么在乎客商体验怎么样的。近年来做项目二的时候,情状就不相同了,那几个连串是八个市廛级的治本应用,它不再是贰个单纯的保管连串,而是面向外界客商提供的参预平台工作的一个终极应用,从顾客体验的角度来讲,项目一这种固定鸠拙的主意不太拿得动手给旁人用,不然旁人一定会感到你的行使做的很low。相对于项目一的界面,项目二有以下特征:

1)菜单点击之后,分界面是欧洲经济共同体刷新,未有iframe了;

2)左边栏和主体内容栏的中度都以不固定的;

3)网页滚动的时候,是页面全体滚动,并不是只滚动主体内容。

多少个礼拜前,看到薪人薪事集资的音信,心想那是个怎么着市廛,怎么以前都没听过,做什么样事情的,于是就百度了下,注册了账号,进去体验了一晃它的出品,后来发觉它做的实在是叁个SAAS应用,分界面上看是二个杰出的管制系列的作风,可是完全部验还不易,当时就感觉今后或许有参照借鉴的股票总市值。正好前一周临时布置要做项目二,依照项目一提了某个须求,于是就想开薪人薪事的选拔了。独有3天时间,职业除了分界面之外,还会有4个专门的工作模块的成效要到位,为了成功那些事物,分界面布局完全参照了薪人薪事的做法,由于原先没用过这种布局形式,所以感觉很美妙,就特意采撷知识学习了弹指间,才发觉那几个法子便是原先听过的圣杯布局。项目二所用的布局方法正是圣杯布局格局中侧面栏固定,主体内容栏自适应的一种做法。

2. 圣杯布局的守旧完结情势

行使圣杯布局的章程,能够轻巧完毕下边包车型大巴布局功用:

图片 3

上面来家家户户表明上海教室中多样布局成效的贯彻形式(本文相关代码下载,本有的的布局方法在代码中对应grail_layout{1,5}.html)。

1)布局一:2栏布局,侧面栏固定在左边,侧边是主导内容栏:

<div class=”layout”> <aside
class=”layout__aside”>左侧栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>

1
2
3
4
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout__aside, .layout__main { float: left; }
.layout { padding-left: 210px; } .layout__main { width: 100%; }
.layout__aside { width: 200px; margin-left: -210px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
        margin-left: -210px;
    }
</style>

效果是:

图片 4

2)布局二:2栏布局,左侧栏固定在左边,左边是大旨内容栏:

<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>左侧栏宽度固定</aside> </div>

1
2
3
4
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout { padding-right: 210px; } .layout__main {
width: 100%; float: left; } .layout__aside { float: right; width:
200px; margin-right: -210px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout {
        padding-right: 210px;
    }
    .layout__main {
        width: 100%;
        float: left;
    }
    .layout__aside {
        float: right;
        width: 200px;
        margin-right: -210px;
    }
</style>

效果是:

图片 5

3)布局三:3栏布局,2个侧边栏分别固定在左侧和右边,中间是重头戏内容栏:

<div class=”layout”> <aside class=”layout__aside
layout__aside–left”>侧边边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside
layout__aside–right”>右左侧栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout__aside, .layout__main { float: left; }
.layout { padding:0 210px; } .layout__main { width: 100%; }
.layout__aside { width: 200px; } .layout__aside–left { margin-left:
-210px; } .layout__aside–right { margin-right: -210px; float: right;
} </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding:0 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        margin-left: -210px;
    }
    .layout__aside–right {
        margin-right: -210px;
        float: right;
    }
</style>

效果是:

图片 6

4)布局四:3栏搭架子,2个左边栏同期一定在侧边,侧边是主题内容栏:

<div class=”layout”> <aside class=”layout__aside
layout__aside–first”>第三个侧边栏宽度固定</aside> <aside
class=”layout__aside
layout__aside–second”>第三个侧边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside–first">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside layout__aside–second">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout__aside, .layout__main { float: left; }
.layout { padding-left: 420px; } .layout__main { width: 100%; }
.layout__aside { width: 200px; } .layout__aside–first {
margin-left: -420px; } .layout__aside–second { margin-left: -210px; }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 420px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–first {
        margin-left: -420px;
    }
    .layout__aside–second {
        margin-left: -210px;
    }
</style>

效果是:

图片 7

5)布局五:3栏搭架子,2个侧面栏同不时间一定在左臂,左侧是重视内容栏:

<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside
layout__aside–first”>首个左边栏宽度固定</aside> <aside
class=”layout__aside
layout__aside–second”>第4个侧边栏宽度固定</aside>
</div>

1
2
3
4
5
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside–first">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside layout__aside–second">第2个侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout:after { clear: both; content: ” “;
display: table; } .layout { padding-right: 420px; } .layout__圣杯布局小结。main {
width: 100%; float: left; } .layout__aside { width: 200px; float:
right; } .layout__圣杯布局小结。aside–first { margin-right: -210px; }
.layout__圣杯布局小结。aside–second { margin-right: -420px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
    .layout:after {
        clear: both;
        content: " ";
        display: table;
    }
    .layout {
        padding-right: 420px;
    }
    .layout__main {
        width: 100%;
        float: left;
    }
    .layout__aside {
        width: 200px;
        float: right;
    }
    .layout__aside–first {
        margin-right: -210px;
    }
    .layout__aside–second {
        margin-right: -420px;
    }
</style>

圣杯布局小结。效果是:

图片 8

PS:

1)本文提供的那几个布局方法,比英特网观看的更加的简澳优(Ausnutria Hyproca)些,主假使因为不怀想包容IE8及以下,不思念把layout__main那一个元素放在最前面,即使卓绝的做法都要求把layout__main做法放在前面,这样可以让网页主体内容优先渲染,笔者感觉这种虚拟是截然多余的,2个成分的渲染顺序分裂,实际上的顾客体验差异又有多大吗,为了多少个眼睛看不到的异样,而选择更头昏眼花的做法,不值得;

2)css布局类的命名采纳了BEM的命名法则,那个能够帮忙您写出结构化,标准化的css,风乐趣的能够去理解:

3)在应用上述措施时,需注意html结构中layout__main与layout__aside的顺序;

3. 圣杯布局古板完成格局的一种变体

第2有个别介绍的法子,使用门槛是:

1)layout成分依据分栏布局的供给安装合适的padding,比方布局一,需配置padding-left;

2)layout__main和layout__aside成分都亟需扭转,layout__main需配置float:
left;layout__aside需依附分栏布局供给安插合适的float值,举例布局一,需配备为float:
left;而布局二需布置float: right;

3)layout__main和layout__aside的一一也很要紧,具体内容可比较之下前面各个布局的html;

4)layout__aside需根据分栏布局必要,配置合适的margin-left或margin-right,譬如布局一,需配备margin-left;布局二需布署margin-right。

固然自身不欣赏早晚要咬牙把layout__main放在前面,不过从第2局部这种艺术的笔触,衍生出的别的一种格局,却只得供给始终把layout__main放在最前边,这种变体做法,也被叫做双飞翼布局。下边来探视双飞翼布局的贯彻方式(考虑到篇幅难点,本处仅提供布局三的代码,要想打听各种布局的详细措施,能够经过在第2片段提供的下载链接下载源码去探听,本有的的布局方法在代码中对应wing_layout{1,5}.html)

1)布局三:3栏布局,2个侧边栏分别固定在左边手和右边手,中间是着重内容栏:

<div class=”layout__main-wrapper”> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<aside class=”layout__aside
layout__aside–left”>左边边栏宽度固定</aside> <aside
class=”layout__aside
layout__aside–right”>右侧边栏宽度固定</aside> <footer
class=”clear”>尾巴部分</footer>

1
2
3
4
5
6
<div class="layout__main-wrapper">
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
<aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
<footer class="clear">底部</footer>

<style type=”text/css”> .clear { clear: both; }
.layout__main-wrapper,.layout__aside { float: left; }
.layout__main-wrapper { width: 100%; } .layout__main { margin: 0
210px; } .layout__aside { width: 200px; } .layout__aside–left {
margin-left: -100%; } .layout__aside–right { margin-left: -200px; }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .clear {
        clear: both;
    }
    .layout__main-wrapper,.layout__aside {
        float: left;
    }
    .layout__main-wrapper {
        width: 100%;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        margin-left: -100%;
    }
    .layout__aside–right {
        margin-left: -200px;
    }
</style>

这段代码的效果与第2部布满局三的功用同样,这种布局的秘籍是:

1)能够未有layout这一层包裹成分;

2)浮动清除需在外部因素上管理;

3)float和margin属性的设置方向相对统一,基本都以一个样子就能够;

4)布局四和布局五兑现起来,双飞翼布局还索要重视position:relative才行,应当要复杂一点。

4. 圣杯布局的纯浮动完结

眼前二种格局皆有2个共同点:

1)layout__main或layout__main-wrapper和layout__aside都会同时浮动;

2)都得依靠负值属性实现。

骨子里还设有一种越发简洁的做法,不须要浮动layout__main或layout__main-wrapper,也无需依附负值属性,只要浮动layout__aside,给layout__main加上适当的margin值,就能够动用生成成分的特性,完结想要的分栏布局功用。仍旧以布局三为例,表达这种艺术,别的措施得以从源码中查看,对应的是float_layout{1,5}.html:

<aside class=”layout__aside
layout__aside–left”>左边边栏宽度固定</aside> <aside
class=”layout__aside
layout__aside–right”>右左边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> <footer
class=”clear”>尾部</footer>

1
2
3
4
<aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
<aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
<footer class="clear">底部</footer>

<style type=”text/css”> .clear { clear: both; } .layout__main {
margin: 0 210px; } .layout__aside–left { width: 200px; float: left; }
.layout__aside–right { width: 200px; float: right; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .clear {
        clear: both;
    }
 
    .layout__main {
        margin: 0 210px;
    }
 
    .layout__aside–left {
        width: 200px;
        float: left;
    }
 
    .layout__aside–right {
        width: 200px;
        float: right;
    }
</style>

这段代码的机能与第2局地搭架子三的功用同样,这种格局的表征是:

1)清除浮动需信赖外界因素;

2)layout__main上边无法选拔clear属性。

5. 圣杯布局的flex达成

flex布局是一种新的网页布局格局,如今的兼容性如下:

图片 9

假如您还没有询问过flex布局,建议你急迅去读书,就算它在pc上兼容性还应该有个别难题,不过在移动端已经完全未有失水准了,微信官方推出的weui那几个框架就大气地运用了这种布局,以下是2个上学这种布局格局的不胜好的能源:

flex布局将要成为网页布局的首要推荐方案,当您看看用flex来贯彻圣杯布局的代码有多简单的时候,你就能感觉眼下那句话一点都不利。使用flex,能够只用同一段css完毕第2片段涉及的两种布局:

<div class=”layout”> <aside
class=”layout__aside”>左侧栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>左边栏宽度固定</aside> </div>
<div class=”layout”> <aside
class=”layout__aside”>左边边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>右右侧栏宽度固定</aside> </div>
<div class=”layout”> <aside
class=”layout__aside”>首个侧边栏宽度固定</aside> <aside
class=”layout__aside”>第二个侧边栏宽度固定</aside> <div
class=”layout__main”>主内容栏宽度自适应</div> </div>
<div class=”layout”> <div
class=”layout__main”>主内容栏宽度自适应</div> <aside
class=”layout__aside”>第一个侧边栏宽度固定</aside> <aside
class=”layout__aside”>首个侧边栏宽度固定</aside>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout { display: flex; } .layout__main
{ flex: 1; } .layout__aside { width: 200px; } .layout >
.layout__aside:not(:first-child), .layout >
.layout__main:not(:first-child){ margin-left: 10px; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
    .layout {
        display: flex;
    }
    .layout__main {
        flex: 1;
    }
    .layout__aside {
        width: 200px;
    }
    .layout > .layout__aside:not(:first-child),
    .layout > .layout__main:not(:first-child){
        margin-left: 10px;
    }
</style>

功用与第2片段每个布局做法的结果一模二样,然而代码减少了大多,并且适用的场景更加多,比如4栏搭架子,5栏布局。

7. 结束语

本文提供了4种圣杯布局的主意,每个格局在眼下只怕未来的办事中,确定会有过多场合都急需动用,所以有不能缺少完全精晓这一个艺术,内容非常少,也不复杂,希望能对你有用,谢谢阅读:)

补充:原来只想介绍圣杯布局这一种办法,后来以为这么的内容有一点点粗糙,于是又特别去上学了别的2种分栏布局的艺术,补充到了作品里面(也正是第3、4局地),所以小说即便题为圣杯布局,但实在讲的是分栏布局的常用方法,独有第2有个别才干算是标准的圣杯布局的剧情。由于本文在颁发前后编辑了一再,导致标题跟内容有一些脱节,请勿见怪:(

正文相关代码下载

1 赞 21 收藏 1
评论

图片 10

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图