? ? ?諸如天貓，京東，當(dāng)當(dāng)?shù)荣徫锲脚_(tái)上的通欄大圖效果使用的商家越來越多，下面就以圖文的方式解說下如何實(shí)現(xiàn)這種效果：

1. 條件要求：

　　可以對(duì)模板進(jìn)行自定義代碼編輯即可，當(dāng)然如果有通欄模板，那就更省事了，這里就不說了。

大部分平臺(tái)都還是沒有通欄模板的。但是只有平臺(tái)模塊中可以自定義編輯代碼，只要不屏蔽樣式，就可以實(shí)現(xiàn)通欄大圖效果。

2.原理解析：

???????通常都是通過在首圖層div中添加兩個(gè)div實(shí)現(xiàn)的，第一個(gè)div絕對(duì)定位，包含帶有超鏈接的通欄圖片，第二個(gè)div相對(duì)定位，定義高度，添加超鏈接。

????? ?也就是，第一個(gè)div負(fù)責(zé)展示通欄大圖，但是不占位置，第二個(gè)div只是給首圖展示占位置的。同樣也可以添加超鏈接。

3.關(guān)鍵代碼如下：

?

<div id="div1" style="margin-left:-960px;width:1920px;left:50%; position:relative;"><a href="http://www.cnblogs.com/xyyt" target="_blank"><img src="http://img01.jpg" height="600" /></a></div>

?

4.使用方法，只需要使用代碼中的div容器，設(shè)置相應(yīng)樣式，添加圖片和超鏈接后，通過模塊編輯器插入到后臺(tái)模塊即可。

　1. div1為通欄層，其樣式中須有

　　margin-left:-960px;width:1920px;　//width是通欄大圖的寬度，根據(jù)實(shí)際情況修改，margin-left的值設(shè)置為width值的一半。

　　left:50%; position:relative;　　　　//這兩個(gè)樣式值不用修改

　　注意：如果平臺(tái)系統(tǒng)不屏蔽z-index樣式，可以添加z-index:9999，將通欄顯示在最外層

　2. 通欄大圖，超鏈接在div1中實(shí)現(xiàn)

　3. div2起站位作用，高度設(shè)置為圖片高度。

5.總結(jié)：

　　一般來說，購物平臺(tái)頁面中多是980px寬居中較多，不論寬度多少，顯示器分辨率多大，只要是居中顯示，用上面的方法實(shí)現(xiàn)的通欄大圖，都能最完美的將1920px寬的圖片以居中的方式呈現(xiàn)在頁面上，只要將圖片主體部分居中設(shè)計(jì)即可，無論用戶顯示器分辨率多大，只要不超過我們的圖片寬度1920,都能將我們的大圖居中的展示出來。不必在擔(dān)心不同的電腦屏幕上看到大圖的位置不一樣的情況了。

轉(zhuǎn)載于:https://www.cnblogs.com/xyyt/p/3188528.html

總結(jié)

以上是生活随笔為你收集整理的兼容多种屏幕分辨率的通栏大图实现方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。