聖杯佈局與雙飛翼佈局的相同點與不同點

来源:http://www.cnblogs.com/zhaoyuxiang/archive/2016/04/03/5349935.html
-Advertisement-
Play Games

三欄式佈局是眾多網頁的常規佈局之一,我們在採用三欄式佈局時所提出的要求一般是左欄與右欄定寬,中間部分寬度自適應,中間部分作為內容主體,我們需要將其放在左欄與右欄之前來達到優先渲染的效果。 2006年Matthew Levine在《A LIST APART》上發表了一篇名為 "《In Search o ...


三欄式佈局是眾多網頁的常規佈局之一,我們在採用三欄式佈局時所提出的要求一般是左欄與右欄定寬,中間部分寬度自適應,中間部分作為內容主體,我們需要將其放在左欄與右欄之前來達到優先渲染的效果。

2006年Matthew Levine在《A LIST APART》上發表了一篇名為《In Search of the Holy Grail》的文章,提出了聖杯佈局的思路。利用負外邊距來實現我們需要的效果,充分體現了CSS的藝術與負外邊距的強大。

之後淘寶提出了為了實現同樣的效果提出了雙飛翼佈局的思路,同樣使用了負外邊距來移動欄目從而達到目的。因此,聖杯佈局和雙飛翼佈局有著相似的思路,但是在某些細節上也有不同點。



相同點


首先,我們建立好左中右三欄,因為中間欄需要優先渲染,我們將其放在最前面。

<div id="content">
    <div id="main">main</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>  

要實現左中右的水平排列,我們要將塊狀元素浮動。

#main,#left,#right{
        float: left;
    }   

假設左欄定寬200px,右欄定寬120px。(為了看清楚效果,我們暫時為三欄設置一個背景色,同時設置不同的高度以便觀察div之間是否重疊)

#main,#left,#right{
    float: left;
}
#left{
    background-color: red;
    height: 100px;
    width: 200px;
    margin-left: -100%;
}
#main{
    background-color: green;
    height: 150px;
    width: 100%;
}
#right{
    background-color: blue;
    height: 100px;
    width: 120px;
}

得到如下效果:

接下來就要使用到強大的負外邊距了,我們先處理左欄,因為中間欄的寬度為100%,所以左欄被擠到下麵去了。現在left要到最左邊的位置,所以我們在left的樣式下輸入:

margin-left: -100%;

可以看到left已經順利的被拉回來了。

right同理,它靠在最右邊。所以輸入:

margin-left:-120px;   

得到效果:


以上的步驟,聖杯佈局和雙飛翼佈局是一模一樣的。



不同點


聖杯佈局

經過以上的設置,出現了一個問題,就是left、right都和main重疊了,我們需要把main縮回來,現在它的寬度充滿了整個父元素content,並且隨著父元素的變化而變化,我們對父元素進行設置。

#content{
    padding: 0 120px 0 200px;
}

但是left和right都在content里,也受到影響被拉進來了。

所以我們要分別讓left往左移,right往右移到它們該在的位置上去,為了讓它們移動,我們需要在left和right的樣式下設置:

position: relative;

並且對left設置:

left: -200px;

對right設置:

right:-120px;

這樣我們就能的到我們所想要的三欄式佈局的效果了。

聖杯佈局CSS代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄式佈局</title>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #main,#left,#right{
        float: left;
    }
    #left{
        background-color: red;
        height: 100px;
        width: 200px;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    #main{
        background-color: green;
        height: 150px;
        width: 100%;
    }
    #right{
        background-color: blue;
        height: 100px;
        width: 120px;
        margin-left: -120px;
        position: relative;
        right: -120px;
    }
    #content{
        padding: 0 120px 0 200px;
    }
</style>
</head>
<body>
<div id="content">
    <div id="main">main</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
</body>
</html>

雙飛翼佈局

面臨同樣的問題,聖杯佈局是對三欄的父元素的內邊距進行了設置,而雙飛翼佈局則是從另一個角度入手。既然左右兩邊要被left和right獨享,那main就不要這兩邊了,那就不會重疊了。

我們創造一個新的div在main的裡面,並且把內容都放在這個main的子元素里。

<div id="main"><div id="main_in">main</div></div>

並且給它設置左右的外邊距,讓出左右欄目的位置就可以實現我們需要的效果了。

#main_in{
    background-color: grey;
    height: 150px;
    margin-left: 200px;
    margin-right: 120px;
}

效果如下:

(去掉main的背景色即可,效果圖沒有去掉是為了方便展示main_in的效果!)

雙飛翼佈局代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄式佈局</title>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #main,#left,#right{
        float: left;
    }
    #left{
        background-color: red;
        height: 100px;
        width: 200px;
        margin-left: -100%;
    }
    #main{
        background-color: green;
        height: 150px;
        width: 100%;
    }
    #right{
        background-color: blue;
        height: 100px;
        width: 120px;
        margin-left: -120px;
    }
    #main_in{
        background-color: grey;
        height: 150px;
        margin-left: 200px;
        margin-right: 120px;
    }
</style>
</head>
<body>
<div id="content">
    <div id="main"><div id="main_in">main</div></div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
</body>
</html>

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

-Advertisement-
Play Games
更多相關文章
  • × 目錄 [1]變形原點 [2]變形函數 [3]多值 前面的話 CSS變形transform是一些效果的集合,主要是移動、旋轉、縮放和傾斜這四種基本操作,還可以通過設置matrix矩陣來實現更複雜的效果。變形transform可以實現2D和3D兩種效果。2D變形涉及的屬性主要有transform變形 ...
  • 同源策略 在瀏覽器的安全策略中“同源策略”非常如雷貫耳,說的是協議、功能變數名稱、埠相同則視為同源,功能變數名稱也可換成IP地址,不同源的頁面腳本不能獲取對方的數據。 要是想使用XMLHttpRequest或者常規的AJAX請求獲取另一個站點的數據,瀏覽器會告訴你“XXXX is not allowed by A ...
  • 之前說要整理這塊內容,分享給大家,工作原因,直到現在,趕上清明宅在家裡,趕緊整理出來與大家分享。 精靈圖(CSS sprite) 所謂精靈圖,其實就是把幾張圖拼成一張圖。從而在低併發的瀏覽器上達到快速傳輸並呈現內容的目的(減少請求)。 在用到這些圖片的時候,需要引用整張圖片然後設定坐標到需要的那張小 ...
  • 轉自:http://kb.cnblogs.com/page/534571/ 一直都聽說DOM很慢,要儘量少的去操作DOM,於是就想進一步去探究下為什麼大家都會這樣說,在網上學習了一些資料,這邊整理出來。 首先,DOM對象本身也是一個js對象,所以嚴格來說,並不是操作這個對象慢,而是說操作了這個對象後 ...
  • 在"setTimeout那些事兒"中,說到JavaScript是單線程。也就是同一時間只能做同一事情。 也好理解,作為瀏覽器腳本語言,如果JavaScript不是單線程,那麼就有點棘手了。比如,與用戶交互或者對DOM進行操作時,在一個線程上修改某個DOM,另外的線程刪除DOM,這時瀏覽器該如何抉擇呢 ...
  • AngularJS $scope裡面的$watch(),$digest()和$apply()是AngularJS的核心函數,學習AngularJS必須理解這幾個函數。 在綁定$scope中的變數到view的時候,AngularJS自動在內部創建一個"Watch"。"Watch"用於監聽Angular ...
  • <a>元素的作用是可以創建一個鏈接,鏈接對應4個狀態:未訪問,已訪問,滑鼠懸停,滑鼠點擊瞬間。 為了給鏈接的4個狀態應用樣式,引入偽類的概念。 什麼是偽類呢?簡單點說,就是你沒定義這個類,但它確實作為一個類來使用。(這些類確實存在,瀏覽器在後臺會向這些類增加和刪除元素) 我在看《CSS設計指南》時, ...
  • 我們知道無論什麼時候只要創建了一個函數,就會為該函數創建一個prototype屬性,這個屬性指向函數的原型對象,預設情況下所有原型對象都會自動獲得一個constructor(構造函數)屬性,這個屬性包含了一個指向prototype屬性所在函數的指針。當調用構造函數創建一個新實例後,該實例內部就會包含 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...