? ? ?諸如天貓，京東，當當等購物平臺上的通欄大圖效果使用的商家越來越多，下面就以圖文的方式解說下如何實現這種效果：

1. 條件要求：

　　可以對模板進行自定義代碼編輯即可，當然如果有通欄模板，那就更省事了，這里就不說了。

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

2.原理解析：

???????通常都是通過在首圖層div中添加兩個div實現的，第一個div絕對定位，包含帶有超鏈接的通欄圖片，第二個div相對定位，定義高度，添加超鏈接。

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

3.關鍵代碼如下：

?

<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容器，設置相應樣式，添加圖片和超鏈接后，通過模塊編輯器插入到后臺模塊即可。

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

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

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

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

　2. 通欄大圖，超鏈接在div1中實現

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

5.總結：

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

轉載于:https://www.cnblogs.com/xyyt/p/3188528.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。