關(guān)于雙飛翼布局與圣杯布局探究

侯沖，王利眾

（中央民族大學(xué)信息工程學(xué)院，北京100081)

關(guān)于雙飛翼布局與圣杯布局探究

侯沖，王利眾

（中央民族大學(xué)信息工程學(xué)院，北京100081)

從21世紀初開始，隨著互聯(lián)技術(shù)迅速發(fā)展與普及，網(wǎng)頁已成為人們獲取和交流信息的主要工具之一。為了構(gòu)建一個合理的美觀的網(wǎng)頁，該文對常用的兩款CSS布局方式“雙飛翼布局”和“圣杯布局”進行了研究。雙飛翼布局和圣杯布局把網(wǎng)頁分成三欄，兩邊兩欄寬度固定，中間自適應(yīng)，以達到所需效果。

CSS布局；自適應(yīng)；雙飛翼布局；圣杯布局

1 div與css組合

隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁在互聯(lián)網(wǎng)領(lǐng)域中的作用不言而喻，制作一個網(wǎng)頁，如何合理的進行布局一直是各前端工程師的思考的難題，傳統(tǒng)的布局主要是框架布局，層布局和表格布局，但是這些傳統(tǒng)布局或者應(yīng)用范圍較差，或者兼容性差，或者設(shè)計復(fù)雜不便于修改。

DIV+CSS進行布局，div起到元素定位作用，配合CSS(Cas?cading Style Sheet層疊樣式表)對頁面顏色布局大小等效果控制作用，可以實現(xiàn)網(wǎng)頁頁面內(nèi)容與網(wǎng)頁外觀變現(xiàn)相分離，并且css文件可以單獨保存降低了網(wǎng)頁體積容量，提高網(wǎng)頁加載速度，并且也容易被搜索引擎搜索到，便于維護，目前網(wǎng)站設(shè)計中多采用這種方式進行定位布局。

2 圣杯布局與雙飛翼布局

圣杯布局與雙飛翼布局是兩種常用的DIV+CSS布局方式，它們都是實現(xiàn)了一種常見的布局效果，即是把頁面分成三欄，兩邊兩欄的寬度固定，而中間的那一欄的寬度是自適應(yīng)，且放在前面首先渲染，所謂自適應(yīng)即是根據(jù)顯示頁面的寬度，或者說當(dāng)拖動瀏覽器頁面寬度變化時，自適應(yīng)區(qū)域會隨著變化。如圖所示，圖1和圖2是同一頁面被拖動不同寬度的效果，兩邊寬度不變，而中間寬度會隨之變化。

2.1 圣杯布局

在html代碼中，middle部分首先要放在container的前面部分，然后是left，right。先將middle、left、right三者都設(shè)置float: left,position:relative(因為后面相對定位會用到）。Middle部分設(shè)置width:100%占滿一行，此時middle占滿一行，left,right部分因為浮動應(yīng)排列在后面（事實上containter寬度不夠則會擠壓到下面）如圖2所示：

圖1 瀏覽器三欄模式

圖2 三欄浮動

當(dāng)要把left拉到middle所在行的最左邊，就要使用marginleft:-100%，這時left拉回到middle所在行的最左邊，但會覆蓋middle內(nèi)容的左端如圖3所示：

圖3 左欄拉回左邊

要把middle內(nèi)容拉出來，所以在外圍container加上pad?ding:0 210px，middle內(nèi)容拉出來了，但left也跟著出來了如圖4所示：

圖4 中間欄拉出來

所以要還原，就對left使用相對定位left:-210px如圖5所示：

圖5 左欄定位左邊

同理，right要拉到middle所在行的最右邊，使用marginleft:-210px，right:-210px，如圖6所示：

圖6 三欄結(jié)構(gòu)

html文檔代碼如下：

2.2 雙飛翼布局

html代碼中，middle部分首先要放在container的最前部分，然后是left，right。將三者都設(shè)置float:left，middle設(shè)置width: 100%占滿一行，此時middle占滿一行如圖7所示：

圖7 三欄浮動

所以要把left拉到middle所在行的最左邊，使用marginleft:-100%，如圖同理right使用margin-left:-200px，如圖8所示：

圖8 左右欄拉進中間欄

此時middle的內(nèi)容被覆蓋，要把middle的內(nèi)容拉出來，除了使用外圍container的padding，還可以考慮使用margin，給middle增加一個內(nèi)層div—middle_content,然后設(shè)置margin:0 210px如圖9所示：

圖9 中間欄劃出內(nèi)容區(qū)域

Html文檔代碼如下：

3 圣杯布局與雙飛翼布局對比

圣杯布局和雙飛翼布局這兩種布局方式在為實現(xiàn)這種效果時的解決方案在前一半都是相同的，它們都讓這三欄全部進行float浮動，但是在左右兩欄部分要加上負的margin讓其與中間的div并排，這樣來形成三欄布局。

但是這兩種布局方式在解決中間欄div的內(nèi)容不被遮擋的問題時的解決思路是不一樣的：

圣杯布局，為了使中間的div內(nèi)容不被遮擋，它將中間div部分設(shè)置了左右padding-left和padding-right后，然后又將左右兩個div部分使用相對布局position:relative并兩者分別配合right和left的屬性，就可以使左右兩欄的div部分移動后不會遮擋中間的div。

雙飛翼布局，為了使中間的div部分的內(nèi)容不被遮擋，可以直接在中間的div的內(nèi)部創(chuàng)建子div用來放置內(nèi)容，然后在這個子div里面使用margin-left和margin-right為左右兩欄div留出位置。

4 結(jié)束語

本文列舉DIV+CSS常用的布局方式：圣杯布局和雙飛翼布局，對著兩種布局方式進行了深入的探討，這兩種布局方式使網(wǎng)頁布局變得簡潔明了而且滿足對不同寬度的顯示需求，便于初學(xué)者使用。在網(wǎng)頁制作過程中可以將頁面的劃分為不同的小區(qū)域塊，然后放到每一個DIV中，這就可以使用DIV+CSS布局，然后再利用CSS對每一個DIV塊進行編輯加工處理，就可以使頁面達到我們想要的效果，并且可以達到結(jié)構(gòu)、表現(xiàn)和行為的分離的效果。這樣使用DIV+CSS布局可以提高網(wǎng)頁的開發(fā)速度，還可以在后期的網(wǎng)頁維護上也能提高效率。如今DIV+CSS組合的布局技術(shù)也是多種多樣的，可以根據(jù)自己的需求選擇合理的布局方式進行研究應(yīng)用。

[1]閆娜.初探DIV+CSS在網(wǎng)頁優(yōu)化中的應(yīng)用[J].科技資訊, 2017(5):38-39.

[2]王海榕.DIV+CSS技術(shù)在網(wǎng)頁布局中的應(yīng)用[J].電子技術(shù)與軟件工程,2017(7):14.

[3]黃楚鵬.基于CSS頁面布局的網(wǎng)頁設(shè)計[J].電腦知識與技術(shù),2017(4):45.

[4]曾順.精通CSS+DIV網(wǎng)頁樣式與布[M].北京:人民郵電出版社,2007.

Explore the Flying Wing Layout and the Holy Grail Layout

HOU Chong,WANG Li-zhong
(Minzu University of China College of Information and Engineering,Beijing 100081,China)

From the beginning of the 21st century,with the rapid development and popularization of Internet technology,Web?pages have become one of the main tools for people to access and exchange information.In order to build a reasonable and beau?tiful webpage,the article explores the two commonly used CSS layout”The Flying wing layout”and“the Holy Grail layout”. Flying wing layout and Holy Grail layout divide the webpage into three columns,and the width of thetwo side columns are fixed,the middle of the webpage is adaptive.

CSS layout;adaptive;The Flying wing layout;the Holy Grail layout

TP311

A

1009-3044(2017)19-0178-02

2017-05-16

侯沖(1990—），男，山東棗莊人，中央民族大學(xué)研究生，研究方向為現(xiàn)代教育技術(shù)。