圣杯布局小结

圣杯布局,很遥远之前就放了,但是一直都未曾详细询问了,最近坐做了一个类别,借鉴了薪人薪事这个局之成品页面,才第一不善用到这种布局方式。于是便花了接触时间,测了产它们实现广大分栏布局之代码,每段代码都非常简单,但布局功能好周到,比我原先之所以底法好用不丢掉。本文是针对她实现方式的一部分总,希望可以管这种技术引进给跟我前一样对它比较陌生的开发人员:)

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;
}

出于斯路是一个里面项目,所以下这种界面结构完全是可以领之,毕竟这不过是一个管理体系,可以无那么当乎用户体验什么的。最近举行项目二的下,情况就是非同等了,这个项目是一个公司级的管制应用,它不再是一个特的管住体系,而是面向外部用户提供的厕平台作业的一个终端应用,从用户体验的角度来说,项目雷同那种固定死板的法子不绝用得出手为旁人用,不然别人一定会看你的采用做的深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>

<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>

<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>

<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">第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>

效果是:

图片 7

5)布局五:3栏布局,2个侧边栏同时一定于右侧,左边是重点内容栏:

<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>

效果是:

图片 8

PS:

1)本文提供的是布局方法,比网上看看底愈来愈从简一些,主要是为不考虑兼容IE8及以下,不考虑将layout__main这个因素放在最前方,虽然经的做法都务求将layout__main做法在眼前,这样好为网页主体内容优先渲染,我看这种设想是意多余的,2只要素的渲染顺序不同,实际上的用户体验差别又闹差不多死吗,为了一个肉眼看不到的反差,而利用重新扑朔迷离的做法,不值得;

2)css布局类的命名采用了BEM的命名规则,这个好帮你写起结构化,规范化的css,有趣味之可以去打听:

http://www.zhihu.com/question/21935157

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>

<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>

<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单学习这种布局方式的慌好的资源:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

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">第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>

职能和第2片每种布局做法的结果一律模一样,但是代码减少了累累,而且适用的面貌再多,比如4栏搭架子,5栏布局。

7. 结束语

本文提供了4栽圣杯布局之道,每种方式在脚下要将来之做事着,肯定会发出过多状况都要使用,所以产生必不可少了掌握这些艺术,内容无多,也无复杂,希望会对君来因此,谢谢阅读:)

补充:原本只是想介绍圣杯布局就同种植艺术,后来以为这样的始末来接触粗糙,于是还要特意去念了另外2种植分栏布局之道,补充到了章里(也不怕是第3、4组成部分),所以文章则写吗圣杯布局,但其实讲的是分栏布局之常用方法,只有第2有的才能够算是标准之圣杯布局之始末。由于本文在宣告前后编辑了频繁,导致标题跟内容稍脱节,请无见怪:(

本文系代码下载

发表评论

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