HTML中的圖片區(qū)域鏈接方法詳解-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

圖片添加區(qū)域鏈接的基本寫法

首先我們看看效果：

實(shí)現(xiàn)這樣的功能需要學(xué)習(xí)以下幾點(diǎn)內(nèi)容。

1.認(rèn)識(shí)<img/><map><area/></map>基本結(jié)構(gòu)

首先復(fù)制一個(gè)html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標(biāo)簽通過(guò)<map>的名字來(lái)驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認(rèn)id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時(shí)要加#。這個(gè)在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來(lái)劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來(lái)劃分區(qū)域的標(biāo)簽，area也是“”區(qū)域“”的意思。

默認(rèn)的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個(gè)值。

分別添加三個(gè)形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個(gè)參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個(gè)平面坐標(biāo)，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對(duì)！注意是“對(duì)”！從左到右，兩個(gè)數(shù)就是一組坐標(biāo)，三組坐標(biāo)可以確定一個(gè)三角形，多組坐標(biāo)可以確定多邊形。例如

這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長(zhǎng)寬像素?cái)?shù)變了，參數(shù)就不正確了），如圖：

這時(shí)，大家會(huì)有一個(gè)問(wèn)題：如何才能知道圖像中某個(gè)像素點(diǎn)的坐標(biāo)呢？

3.使用Gimp軟件精準(zhǔn)定位圖片區(qū)域

使用Gimp軟件可以解決這個(gè)問(wèn)題。

Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開源免費(fèi)的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點(diǎn)擊“文件”找到“打開”：

選擇要打開的圖片名字：

點(diǎn)擊名稱后，右邊會(huì)有圖像預(yù)覽，點(diǎn)擊“打開”即可：

打開后如圖：

把鼠標(biāo)放到圖像的任意位置，看左下角：

這里就會(huì)顯示我們鼠標(biāo)所在的像素坐標(biāo)數(shù)值。

這樣我們就能方便地寫“poly”的coords了。

請(qǐng)?jiān)诳臻e時(shí)找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標(biāo)簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標(biāo)滑過(guò)鏈接區(qū)域時(shí)提示讀者，如下：

title="殲20氣動(dòng)外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時(shí)還有一些注意事項(xiàng)，我們下次再詳細(xì)討論。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚師兄，一起精研技藝。

篇文章主要給大家介紹一下使用html+css來(lái)模仿制作小米官方網(wǎng)站右側(cè)的浮動(dòng)框。我們來(lái)看下邊的這個(gè)浮動(dòng)框，位于小米官網(wǎng)的右側(cè)并且隨著頁(yè)面的滾動(dòng)，一直浮動(dòng)在右側(cè)不變；

我們通過(guò)上邊的圖片可以看出圖片有5個(gè)單獨(dú)的塊元素組成，每個(gè)塊元素鼠標(biāo)經(jīng)過(guò)都有一個(gè)單獨(dú)的顏色變?yōu)辄S色的效果，然后第一個(gè)塊元素鼠標(biāo)經(jīng)過(guò)還會(huì)在左側(cè)彈出更多內(nèi)容。接下來(lái)我們簡(jiǎn)單說(shuō)一下制作所用到的核心知識(shí)。

1）制作頁(yè)面所需知識(shí)點(diǎn)

1、列表標(biāo)簽（dl dd dt）的使用，使用dl和dd來(lái)完成前邊5個(gè)相同模塊的制作

2、鼠標(biāo)經(jīng)過(guò)（hover）的使用，第一個(gè)元素鼠標(biāo)經(jīng)過(guò)左側(cè)顯示，這個(gè)跟我們之前將的導(dǎo)航菜單類似，還有鼠標(biāo)經(jīng)過(guò)文字以及圖片改變顏色，這里可以使用hover之后改變背景圖片來(lái)實(shí)現(xiàn)；

3、浮動(dòng)（fixed）的使用，該內(nèi)容一直浮動(dòng)在網(wǎng)頁(yè)右側(cè)，跟隨頁(yè)面一起滾動(dòng)，我們可以使用position:fixed來(lái)實(shí)現(xiàn)；

2）代碼實(shí)操演練

大體了解了我們所要使用的知識(shí)點(diǎn)之后，我們就可以開始根據(jù)圖片上的內(nèi)容來(lái)制作我們所需要的頁(yè)面了，具體的實(shí)現(xiàn)代碼就如下方所示：（首先寫一個(gè)div盒子，看到列表形式，直接使用dl和dd，然后每個(gè)元素內(nèi)部有文字和圖片，使用h4標(biāo)簽和span標(biāo)簽來(lái)存放圖片和文字內(nèi)容，就這么搞定了哈哈），來(lái)看代碼吧。

html代碼挺簡(jiǎn)單的，我們啪啪敲完之后呢，剩下的就是書寫css代碼，來(lái)完成圖片所示的布局樣式的制作了。那么我們的css代碼就如下圖所示：（最外層box直接來(lái)個(gè)fixed和right、bottom配合，讓其浮動(dòng)在右側(cè)，然后寫寫dl和dd的寬高，控制控制span的背景，隨便寫寫hover事件，ok完成了）。不多說(shuō)了，看代碼吧。

好了，本篇文章就給大家說(shuō)到這里，大家自己動(dòng)手寫一下看能不能寫出一樣的頁(yè)面效果出來(lái)，也可以找一些類似的頁(yè)面自己練習(xí)一下，有需要源碼的可以直接私信【網(wǎng)站源碼】即可。

每日金句：只有知道別人心里在想什么，你才能得到你想要的。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

文概要

本文將介紹如下幾種常見的布局：

一、單列布局

常見的單列布局有兩種：

header,content 和 footer 等寬的單列布局
header 與 footer 等寬,content 略窄的單列布局

1.如何實(shí)現(xiàn)

對(duì)于第一種，先通過(guò)對(duì) header,content,footer 統(tǒng)一設(shè)置 width：1000px;或者 max-width：1000px(這兩者的區(qū)別是當(dāng)屏幕小于 1000px 時(shí)，前者會(huì)出現(xiàn)滾動(dòng)條，后者則不會(huì)，顯示出實(shí)際寬度);然后設(shè)置 margin:auto 實(shí)現(xiàn)居中即可得到。

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
 background-color: blue; 
} 
.content{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 400px; 
 background-color: aquamarine; 
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px; 
 background-color: aqua; 
}

對(duì)于第二種，header、footer 的內(nèi)容寬度不設(shè)置，塊級(jí)元素充滿整個(gè)屏幕，但 header、content 和 footer 的內(nèi)容區(qū)設(shè)置同一個(gè) width，并通過(guò) margin:auto 實(shí)現(xiàn)居中。

<div class="header"> 
 <div class="nav"></div> 
</div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
 background-color: blue; 
} 
.nav{ 
 margin: 0 auto; 
 max-width: 800px; 
 background-color: darkgray; 
 height: 50px; 
} 
.content{ 
 margin: 0 auto; 
 max-width: 800px; 
 height: 400px; 
 background-color: aquamarine; 
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px; 
 background-color: aqua; 
}

二、兩列自適應(yīng)布局

兩列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式

1.float+overflow:hidden

如果是普通的兩列布局， 浮動(dòng)+普通元素的 margin 便可以實(shí)現(xiàn)，但如果是自適應(yīng)的兩列布局，利用 float+overflow:hidden 便可以實(shí)現(xiàn)，這種辦法主要通過(guò) overflow 觸發(fā) BFC,而 BFC 不會(huì)重疊浮動(dòng)元素。由于設(shè)置 overflow:hidden 并不會(huì)觸發(fā) IE6-瀏覽器的 haslayout 屬性，所以需要設(shè)置 zoom:1 來(lái)兼容 IE6-瀏覽器。具體代碼如下：

<div class="parent" style="background-color: lightgrey;"> 
 <div class="left" style="background-color: lightblue;"> 
 <p>left</p> 
 </div> 
 <div class="right" style="background-color: lightgreen;"> 
 <p>right</p> 
 <p>right</p> 
 </div> 
</div> 
.parent { 
overflow: hidden; 
zoom: 1; 
} 
.left { 
float: left; 
margin-right: 20px; 
} 
.right { 
overflow: hidden; 
zoom: 1; 
}

注意點(diǎn):如果側(cè)邊欄在右邊時(shí)，注意渲染順序。即在 HTML 中，先寫側(cè)邊欄后寫主內(nèi)容

2.Flexbox 布局

Flexbox 布局，也叫彈性盒子布局，區(qū)區(qū)簡(jiǎn)單幾行代碼就可以實(shí)現(xiàn)各種頁(yè)面的的布局。

//html部分同上 
.parent { 
display:flex; 
} 
.right { 
margin-left:20px; 
flex:1; 
}

3.Grid 布局

Grid 布局，是一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，目的是用來(lái)優(yōu)化用戶界面設(shè)計(jì)。

//html部分同上 
.parent { 
display:grid; 
grid-template-columns:auto 1fr; 
grid-gap:20px 
}

三、三欄布局

特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度 ，實(shí)現(xiàn)三欄布局有多種方式：

1.浮動(dòng)布局

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>Layout</title> 
 <style media="screen"> 
 html * { 
 padding: 0; 
 margin: 0; 
 } 
 .layout article div { 
 min-height: 150px; 
 } 
 </style> 
</head> 
<body> 
 <!--浮動(dòng)布局 --> 
 <section class="layout float"> 
 <style media="screen"> 
 .layout.float . left { 
 float: left; 
 width: 300px; 
 background: red; 
 } 
 .layout.float .center { 
 background: yellow; 
 } 
 .layout.float . right { 
 float: right; 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-right-center"> 
 <div class="left"></div> 
 <div class="right"></div> // 右欄部分要寫在中間內(nèi)容之前 
 <div class="center"> 
 <h2>浮動(dòng)解決方案</h2> 
 1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案； 
 </div> 
 </article> 
 </section> 
</body> 
</html>

這種布局方式，dom 結(jié)構(gòu)必須是先寫浮動(dòng)部分，然后再中間塊，否則右浮動(dòng)塊會(huì)掉到下一行。浮動(dòng)布局的優(yōu)點(diǎn)就是比較簡(jiǎn)單，兼容性也比較好。但浮動(dòng)布局是有局限性的，浮動(dòng)元素脫離文檔流，要做清除浮動(dòng)，這個(gè)處理不好的話，會(huì)帶來(lái)很多問(wèn)題，比如父容器高度塌陷等。

2.絕對(duì)定位布局

<!--絕對(duì)布局 --> 
 <section class="layout absolute"> 
 <style> 
 .layout.absolute . left-center- right>div{ 
 position: absolute;//三塊都是絕對(duì)定位 
 } 
 .layout.absolute . left { 
 left:0; 
 width: 300px; 
 background: red; 
 } 
 .layout.absolute .center { 
 right: 300px; 
 left: 300px;//離左右各三百 
 background: yellow; 
 } 
 .layout.absolute . right { 
 right: 0; 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>絕對(duì)定位解決方案</h2> 
 1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

絕對(duì)定位布局優(yōu)點(diǎn)就是快捷，設(shè)置很方便，而且也不容易出問(wèn)題。缺點(diǎn)就是，容器脫離了文檔流，后代元素也脫離了文檔流，高度未知的時(shí)候，會(huì)有問(wèn)題，這就導(dǎo)致了這種方法的有效性和可使用性是比較差的。

3.flexbox 布局

<!--flexbox布局--> 
 <section class="layout flexbox"> 
 <style> 
 .layout.flexbox .left-center- right{ 
 display: flex; 
 } 
 .layout.flexbox .left { 
 width: 300px; 
 background: red; 
 } 
 .layout.flexbox .center { 
 background: yellow; 
 flex: 1; 
 } 
 .layout.flexbox .right { 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>flexbox解決方案</h2> 
 1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

flexbox 布局是 css3 里新出的一個(gè)，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個(gè)。目前移動(dòng)端的布局也都是用 flexbox。 flexbox 的缺點(diǎn)就是 IE10 開始支持，但是 IE10 的是-ms 形式的。

4.表格布局

<!--表格布局--> 
 <section class="layout table"> 
 <style> 
 .layout.table . left-center- right { 
 display: table; 
 height: 150px; 
 width: 100%; 
 } 
 .layout.table . left-center- right>div { 
 display: table-cell; 
 } 
 .layout.table . left { 
 width: 300px; 
 background: red; 
 } 
 .layout.table .center { 
 background: yellow; 
 } 
 .layout.table . right { 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>表格布局解決方案</h2> 
 1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

表格布局的兼容性很好，在 flex 布局不兼容的時(shí)候，可以嘗試表格布局。當(dāng)內(nèi)容溢出時(shí)會(huì)自動(dòng)撐開父元素。

表格布局也是有缺陷:① 無(wú)法設(shè)置欄邊距；② 對(duì) seo 不友好；③ 當(dāng)其中一個(gè)單元格高度超出的時(shí)候，兩側(cè)的單元格也是會(huì)跟著一起變高的，然而有時(shí)候這并不是我們想要的效果。

5.網(wǎng)格布局

<!--網(wǎng)格布局--> 
<section class="layout grid"> 
 <style> 
 .layout.grid .left-center- right { 
 display: grid; 
 width: 100%; 
 grid-template-columns: 300px auto 300px; 
 grid-template-rows: 150px;//行高 
 } 
 .layout.grid .left { 
 background: red; 
 } 
 .layout.grid .center { 
 background: yellow; 
 } 
 .layout.grid .right { 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>網(wǎng)格布局解決方案</h2> 
 1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
</section>

CSS Grid 是創(chuàng)建網(wǎng)格布局最強(qiáng)大和最簡(jiǎn)單的工具。就像表格一樣，網(wǎng)格布局可以讓 Web 設(shè)計(jì)師根據(jù)元素按列或行對(duì)齊排列，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)，從而使各種布局不可能與表格一樣。例如，一個(gè)網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。

但網(wǎng)格布局的兼容性不好。IE10+上支持，而且也僅支持部分屬性。

6.圣杯布局

① 特點(diǎn)

比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是 dom 結(jié)構(gòu)必須是先寫中間列部分，這樣實(shí)現(xiàn)中間列可以優(yōu)先加載。

.container { 
 padding-left: 220px;//為左右欄騰出空間 
 padding-right: 220px; 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
 position: relative; 
 left: -220px; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
 position: relative; 
 right: -220px; 
} 
<article class="container"> 
 <div class="center"> 
 <h2>圣杯布局</h2> 
 </div> 
 <div class="left"></div> 
 <div class="right"></div> 
</article>

② 實(shí)現(xiàn)步驟

三個(gè)部分都設(shè)定為左浮動(dòng)， 否則左右兩邊內(nèi)容上不去，就不可能與中間列同一行 。然后設(shè)置 center 的寬度為 100%( 實(shí)現(xiàn)中間列內(nèi)容自適應(yīng) )，此時(shí)，left 和 right 部分會(huì)跳到下一行

通過(guò)設(shè)置 margin-left 為負(fù)值讓 left 和 right 部分回到與 center 部分同一行

通過(guò)設(shè)置父容器的 padding-left 和 padding-right，讓左右兩邊留出間隙。

通過(guò)設(shè)置相對(duì)定位，讓 left 和 right 部分移動(dòng)到兩邊。

③ 缺點(diǎn)

center 部分的最小寬度不能小于 left 部分的寬度，否則會(huì) left 部分掉到下一行
如果其中一列內(nèi)容高度拉長(zhǎng)(如下圖)，其他兩列的背景并不會(huì)自動(dòng)填充。(借助等高布局正padding+負(fù)margin可解決，下文會(huì)介紹)

7.雙飛翼布局

① 特點(diǎn)

同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問(wèn)題，實(shí)現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是最高欄，不會(huì)出問(wèn)題。

.container { 
 min-width: 600px;//確保中間內(nèi)容可以顯示出來(lái)，兩倍 left寬+ right寬 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.center .inner { 
 margin: 0 200px; //新增部分 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
} 
<article class="container"> 
 <div class="center"> 
 <div class="inner">雙飛翼布局</div> 
 </div> 
 <div class="left"></div> 
 <div class="right"></div> 
</article>

② 實(shí)現(xiàn)步驟(前兩步與圣杯布局一樣)

三個(gè)部分都設(shè)定為左浮動(dòng)，然后設(shè)置 center 的寬度為 100%，此時(shí)，left 和 right 部分會(huì)跳到下一行；
通過(guò)設(shè)置 margin-left 為負(fù)值讓 left 和 right 部分回到與 center 部分同一行；
center 部分增加一個(gè)內(nèi)層 div，并設(shè) margin: 0 200px；

③ 缺點(diǎn)

多加一層 dom 樹節(jié)點(diǎn)，增加渲染樹生成的計(jì)算量 。

④ 圣杯布局和雙飛翼布局實(shí)現(xiàn)方式對(duì)比:

兩種布局方式都是把主列放在文檔流最前面，使主列優(yōu)先加載。
兩種布局方式在實(shí)現(xiàn)上也有相同之處，都是讓三列浮動(dòng)，然后通過(guò)負(fù)外邊距形成三列布局。
兩種布局方式的不同之處在于如何處理中間主列的位置： 圣杯布局是利用父容器的左、右內(nèi)邊距+兩個(gè)從列相對(duì)定位 ; 雙飛翼布局是把主列嵌套在一個(gè)新的父級(jí)塊中利用主列的左、右外邊距進(jìn)行布局調(diào)整

四、等高列布局

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實(shí)現(xiàn)包括偽等高和真等高,偽等高只是看上去等高而已,真等高是實(shí)實(shí)在在的等高。

1.利用背景圖片

這種方法是我們實(shí)現(xiàn)等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個(gè)背景圖進(jìn)行Y軸的鋪放，從而實(shí)現(xiàn)一種等高列的假象。實(shí)現(xiàn)方法簡(jiǎn)單，兼容性強(qiáng)，不需要太多的css樣式就可以輕松實(shí)現(xiàn),但此方法不適合流體布局等高列的布局。

在制作樣式之前需要一張類似下面的背景圖：

<div class=”container clearfix”> 
 <div class=”left”></div> 
 <div class=”content”></div> 
 <div class=”right”></div> 
</div> 
.container { 
background: url("column.png") repeat-y; 
width: 960px; 
margin: 0 auto; 
} 
.left { 
float: left; 
width: 220px; 
} 
.content { 
float: left; 
width: 480px; 
} 
.right { 
float: left; 
width: 220px; 
}

2.利用正padding+負(fù)margin

我們通過(guò)等布局便可解決圣杯布局的第二點(diǎn)缺點(diǎn)，因?yàn)楸尘笆窃?padding 區(qū)域顯示的，設(shè)置一個(gè)大數(shù)值的 padding-bottom，再設(shè)置相同數(shù)值的負(fù)的 margin-bottom，并在所有列外面加上一個(gè)容器，并設(shè)置 overflow:hidden 把溢出背景切掉。這種可能實(shí)現(xiàn)多列等高布局，并且也能實(shí)現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡(jiǎn)單，兼容所有瀏覽器。新增代碼如下：

.center, 
 .left, 
 .right { 
 padding-bottom: 10000px; 
 margin-bottom: -10000px; 
 } 
 .container { 
 padding-left: 220px; 
 padding-right: 220px; 
 overflow: hidden;//把溢出背景切掉 
 }

3.模仿表格布局

這是一種非常簡(jiǎn)單，易于實(shí)現(xiàn)的方法。不過(guò)兼容性不好，在ie6-7無(wú)法正常運(yùn)行。

 <div class="container table"> 
 <div class="containerInner tableRow"> 
 <div class="column tableCell cell1"> 
 <div class="left aside"> 
 .... 
 </div> 
 </div> 
 <div class="column tableCell cell2"> 
 <div class="content section"> 
 ... 
 </div> 
 </div> 
 <div class="column tableCell cell3"> 
 <div class="right aside"> 
 ... 
 </div> 
 </div> 
 </div> 
 </div> 
.table { 
width: auto; 
min-width: 1000px; 
margin: 0 auto; 
padding: 0; 
display: table; 
} 
.tableRow { 
display: table-row; 
} 
.tableCell { 
display: table-cell; 
width: 33%; 
} 
.cell1 { 
background: #f00; 
height: 800px; 
} 
.cell2 { 
background: #0f0; 
} 
.cell3 { 
background: #00f; 
}

4.使用邊框和定位

這種方法是使用邊框和絕對(duì)定位來(lái)實(shí)現(xiàn)一個(gè)假的高度相等列的效果。結(jié)構(gòu)簡(jiǎn)單，兼容各瀏覽器，容易掌握。假設(shè)你需要實(shí)現(xiàn)一個(gè)兩列等高布局，側(cè)欄高度要和主內(nèi)容高度相等。

#wrapper { 
width: 960px; 
margin: 0 auto; 
} 
#mainContent { 
border-right: 220px solid #dfdfdf; 
position: absolute; 
width: 740px; 
height: 800px; 
background: green; 
} 
#sidebar { 
background: #dfdfdf; 
margin-left: 740px; 
position: absolute; 
height: 800px; 
width: 220px; 
} 
<div id="wrapper"> 
 <div id="mainContent">...</div> 
 <div id="sidebar">...</div> 
</div>

五、粘連布局

1.特點(diǎn)

有一塊內(nèi)容 <main> ，當(dāng) <main> 的高康足夠長(zhǎng)的時(shí)候，緊跟在 <main> 后面的元素 <footer> 會(huì)跟在 <main> 元素的后面。
當(dāng) <main> 元素比較短的時(shí)候(比如小于屏幕的高度),我們期望這個(gè) <footer> 元素能夠“粘連”在屏幕的底部

具體代碼如下：

main

footer

* { 
 margin: 0; 
 padding: 0; 
 } 
 html, 
 body { 
 height: 100%;//高度一層層繼承下來(lái) 
 } 
 #wrap { 
 min-height: 100%; 
 background: pink; 
 text-align: center; 
 overflow: hidden; 
 } 
 #wrap .main { 
 padding-bottom: 50px; 
 } 
 #footer { 
 height: 50px; 
 line-height: 50px; 
 background: deeppink; 
 text-align: center; 
 margin-top: -50px; 
 }

2.實(shí)現(xiàn)步驟

(1)footer 必須是一個(gè)獨(dú)立的結(jié)構(gòu)，與 wrap 沒有任何嵌套關(guān)系

(2)wrap 區(qū)域的高度通過(guò)設(shè)置 min-height，變?yōu)橐暱诟叨?/strong>

(3)footer 要使用 margin 為負(fù)來(lái)確定自己的位置

(4)在 main 區(qū)域需要設(shè)置 padding-bottom。這也是為了防止負(fù) margin 導(dǎo)致 footer 覆蓋任何實(shí)際內(nèi)容。

參考文章

雙飛翼布局介紹-始于淘寶 UED
CSS 三欄布局的四種方法
CSS 兩列布局---左側(cè)固定，右側(cè)自適應(yīng)
兩列自適應(yīng)布局的四種思路
css 常見布局之九：三欄布局的常見實(shí)現(xiàn)
【布局】聊聊為什么淘寶要提出「雙飛翼」布局
CSS 的單列布局與二&三列布局
八種創(chuàng)建等高列布局

在線咨詢

上一篇：Qt編寫自定義控件-光暈時(shí)鐘
下一篇：CSS 中各種居中你真的玩明白了么

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

推薦閱讀

萬(wàn)字長(zhǎng)文詳解 Go 程序是怎樣...

常用HTML Meta標(biāo)簽

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素-零...

前端學(xué)習(xí)筆記

觀察號(hào)熱力榜⑦三百多萬(wàn)的閱讀...

簡(jiǎn)單小程序：登錄頁(yè)面（html）

3分鐘教你挑選筆記本電腦（男生...

「基礎(chǔ)」Fiddler基本信息

「胖達(dá)分享」網(wǎng)頁(yè)中的圖片和htm...

有些網(wǎng)站打不開怎么辦？

趕緊收藏！2月17日-21日“空中...

曾經(jīng)稱霸4399的《魔塔》，竟掀...

淺談實(shí)時(shí)數(shù)據(jù)庫(kù)系統(tǒng)原理及其應(yīng)用

如何使用phpStudy軟件測(cè)試本地P...

界面組件DevExpress WinForms...

50個(gè)好用的前端框架，千萬(wàn)收好...

UX項(xiàng)目0到1的正確開啟方式

三種快速搞定Linux文件批量重命...

網(wǎng)警課堂 | 網(wǎng)絡(luò)攻擊不可怕，...

HTML常用基礎(chǔ)標(biāo)簽，前端從入門...

整合營(yíng)銷服務(wù)商

HTML中的圖片區(qū)域鏈接方法詳解-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

圖片添加區(qū)域鏈接的基本寫法

目錄

1）制作頁(yè)面所需知識(shí)點(diǎn)

2）代碼實(shí)操演練

您的項(xiàng)目需求