目錄
1. 从2个实际的需求说起
2. 圣杯布局的传统实现方法
3. 圣杯布局的flex实现
4. 结束语
首頁 web前端 html教學 圣杯布局小结_html/css_WEB-ITnose

圣杯布局小结_html/css_WEB-ITnose

Jun 21, 2016 am 08:58 AM

圣杯布局,很久之前就听过,但是一直都没详细了解过,最近因为做了一个项目,借鉴了薪人薪事这个公司的产品页面,才第一次用到这种布局方式。于是就花了点时间,测了下它所有分栏布局的代码,每段代码都非常简单,但布局效果很完美,比我以前用的方式好用不少。本文是对它实现方式的一些总结,希望可以把这种技术推荐给跟我之前一样对它比较陌生的开发人员:)

1. 从2个实际的需求说起

今年有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. 圣杯布局的传统实现方法

利用圣杯布局的方法,可以轻松实现下面的布局效果:

下面来一一说明上图中五种布局效果的实现方法(本文相关代码下载)。

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

<div class="layout">    <aside class="layout__aside">侧边栏宽度固定</aside>    <div class="layout__main">主内容栏宽度自适应</div></div>
登入後複製
<style type="text/css">    .layout:after, .layout:before {        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>
登入後複製

效果是:

2)布局二:2栏布局,侧边栏固定在右边,左侧是主体内容栏:

<div class="layout">    <div class="layout__main">主内容栏宽度自适应</div>    <aside class="layout__aside">侧边栏宽度固定</aside></div>
登入後複製
<style type="text/css">    .layout:after, .layout:before {        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>
登入後複製

效果是:

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, .layout:before {        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>
登入後複製

效果是:

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, .layout:before {        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>
登入後複製

效果是:

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, .layout:before {        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>
登入後複製

效果是:

PS:

1)本文提供的这些布局方法,比网上看到的更加简洁一些,主要是因为不考虑兼容IE8及以下,不考虑把layout__main这个元素放在最前面,虽然经典的做法都要求把layout__main做法放在前面,这样可以让网页主体内容优先渲染,我认为这种考虑是完全多余的,2个元素的渲染顺序不同,实际上的用户体验差别又有多大呢,为了一个肉眼看不到的差异,而采用更复杂的做法,不值得;

2)css布局类的命名采用了BEM的命名规则,这个可以帮助你写出结构化,规范化的css,有兴趣的可以去了解:

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

3. 圣杯布局的flex实现

flex布局是一种新的网页布局方式,目前的兼容性如下:

如果你还没有了解过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>
主内容栏宽度自适应
主内容栏宽度自适应
主内容栏宽度自适应
登入後複製
<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栏布局。

4. 结束语

本文介绍了2种圣杯布局的方法,每种方法在当前或者将来的工作中,肯定会有很多场景都需要使用,所以有必要完全掌握这2种技术,内容不多,也不复杂,希望能对你有用,谢谢阅读:)

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

See all articles