聖杯佈局小結

来源:http://www.cnblogs.com/lyzg/archive/2016/01/27/5160570.html
-Advertisement-
Play Games

聖杯佈局，很久之前就聽過，但是從來都沒深入瞭解過，最近因為做了一個項目，借鑒了薪人薪事這個公司的產品頁面，才第一次用到這種佈局方式。於是就花了點時間，測了下它所有分欄佈局的代碼，每段代碼都非常簡單，但佈局效果很完美，比我以前用的方式好用不少。本文是對它實現方式的一些總結，希望可以把這種技術推薦給跟我...


聖杯佈局，很久之前就聽過，但是一直都沒詳細瞭解過，最近因為做了一個項目，借鑒了薪人薪事這個公司的產品頁面，才第一次用到這種佈局方式。於是就花了點時間，測了下它實現常見分欄佈局的代碼，每段代碼都非常簡單，但佈局效果很完美，比我以前用的方式好用不少。本文是對它實現方式的一些總結，希望可以把這種技術推薦給跟我之前一樣對它比較陌生的開發人員：）

1. 從2個實際的需求說起

今年有2個項目，都是管理系統的項目，這種項目的界面特點基本都是左側邊欄顯示菜單，右側顯示網頁主體或者是頂部的導航欄顯示菜單，導航欄以下顯示網頁主體，我這兩個項目都是第一種類型：

項目一：

image

項目二：

image

在做項目一的時候，採用了以前做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. 聖杯佈局的傳統實現方法

利用聖杯佈局的方法，可以輕鬆實現下麵的佈局效果：

image

下麵來一一說明上圖中五種佈局效果的實現方法（本文相關代碼下載，本部分的佈局方法在代碼中對應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>

效果是：

image

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>

效果是：

image

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>

效果是：

image

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>

效果是：

image

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>

效果是：

image

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佈局是一種新的網頁佈局方式，目前的相容性如下：

如果你還沒有瞭解過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部分才能算是準確的聖杯佈局的內容。由於本文在發佈前後編輯了多次，導致標題跟內容有些脫節，請勿見怪：（

本文相關代碼下載


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AngularJS轉換請求內容
    在"AngularJS中轉換響應內容"中，體驗瞭如何轉換響應內容。本篇來體驗如何轉換請求內容。主頁面通過onSend方法把request對象轉遞出去。 發送request對象和onSend方法被定義在了controller中。angular.module('api.controller...
  • 隨筆
    CSS 技術的最大優點是，它能夠幫助你將 Web 文檔的內容結構（html）和版面設計（css）分離開來。文檔結構和文檔樣式的分離可以保證頁面都能平穩退化。具備 CSS 支持的瀏覽器能夠把頁面呈現的美輪美奐，但是不支持或者禁用了 CSS 功能的瀏覽器同樣可以把頁面的內容按照正確的結構顯示出來。在 H...
  • H5小內容（二）
    音視頻處理 視頻處理 基本內容 使用Flash技術處理HTML頁面中的視頻內容 包含音頻、動畫、網頁游戲等 特點 瀏覽器原生不支持(IE瀏覽器要求安裝ActiveX組件) 性能不好(不能過多地使用) 智能移動端並不支持Flash技術 命運 Flash的母公司A...
  • AngularJS中轉換響應內容
    從遠程API獲取到的響應內容，通常是json格式的，有時候需要對獲取到的內容進行轉換，比如去除某些不需要的欄位，給欄位取別名，等等。本篇就來體驗在AngualrJS中如何實現。在主頁面，還是從controller中拿數據。 ...
  • jsonp 使用總結
    首先：jsonp是json用來跨域的一個東西。原理是通過script標簽的跨域特性來繞過同源策略。經過測試實驗：發送端：$.ajax({ type : "post", url : "ajax.php", dataType : "jsonp", jsonp: "callback...
  • 關於移動端click事件綁定的一個細節
    click是最常見的點擊事件，但是對於移動終端，比如手機，一般都是以touch事件代替的，而click事件在手機也是生效的，只是會有1-2秒左右的延遲，那麼當你想要用click而非touch事件的時候，該如何處理事件綁定的呢，不用說，為了阻止事件冒泡，以及動態載入出來的DOM元素也綁定點擊事件，肯定...
  • AngularJS中介者模式實例
    在任何應用程式中，中介者模式隨處可見。→ 有一個事件源，觸發事件，傳遞參數→ 中介者記下這個事件，向外界廣播，並帶上參賽→ 有一個地方偵聽中介者事件，一旦事件源觸發事件，就從中介者手裡獲取事件相關參數本篇，要體驗的是在AngularJS中的中介者模式。場景是：當創建一個訂單，需要引發一些動作，比如給...
  • Meta標簽中的viewport屬性及含義
    最近在學習移動網頁開發，首先看到head裡面設置了下麵這個屬性：通過搜集資料，大體瞭解了viewport屬性的含義。一、什麼是Viewport手機瀏覽器是把頁面放在一個虛擬的“視窗”（viewport）中，通常這個虛擬的“視窗”（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的視窗中，也不...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類