前言

站長於2013年8月14號開始接觸淘寶，由於div+css基礎比較勞固加上自己喜歡各種搗騰，至今已積累了大量的店鋪裝修經驗。早在2014年11月份開始，站長就在導航上新建了“懶人程式碼”欄目，裡面存放淘寶店鋪裝修方面經驗與自己的css3特效。

由於網站中關於淘寶店鋪裝修方面的教程文章過多而多數讀者均未能一一瀏覽完畢。一些簡單的問題，仍是有不少新手在群裡問及。為了更好更快更加精準的解決新手在裝修店鋪中遇到的各種問題，藝靈決定將以往的相關文章中的核心內容整理到這篇文章中，同時也會新增一些技巧性經驗。也就是說，所有問題均可在此文章中找到解決方案，我想這應該是一個不錯的解決方案。（友情提示：查詢問題時記得使用Ctrl+F

目錄列表

• 1.會用瀏覽器
• 　1.1趁熱打鐵
• 2.熟悉店鋪後臺
• 3.邊框問題
• 　3.1去圖片邊框
• 　3.2去熱點輪廓(邊框)
• 4.超連結問題
• 　4.1去超連結下劃線
• 　4.2圖片上任意地方新增超連結問題
• 　4.3淘寶天貓店鋪錨點跳轉失效
• 5.下邊距問題
• 　5.1店招下10px問題
• 　5.2模組下10px/20px問題
• 　5.3檢視下邊距具體值(2015年3月8號臨時更新此條)
• 6.顯示已隱藏的模組/店招
• 　6.1顯示已隱藏的店招
• 　6.2顯示已隱藏的自定義模組
• 7.全屏問題
• 　7.1全屏店招
• 　7.2全屏店招1px白邊
• 　7.3全屏程式碼框架
• 　7.4自定義頁面全屏
• 　7.5天貓B店頁尾全屏且無水平滾動條
• 　7.6淘寶C店頁尾全屏
• 　7.7淘寶C店詳情頁百變全屏背景
• 　7.8全屏固定背景
• 　7.9視差滾動特效
• 8.自定義搜尋框
• 9.關注程式碼
• 　9.1關注程式碼帶數字
• 　9.2關注程式碼可取消
• 10.您不能使用他人圖片空間中的圖片
• 　10.1延遲載入技術data-ks-lazyload
• 　10.2上傳自己空間
• 11.收藏程式碼
• 　11.1店鋪收藏程式碼
• 　11.2單個寶貝收藏程式碼
• 12.加入購物車程式碼
• 13.分享程式碼
• 14.喜歡程式碼
• 15.店鋪留言板程式碼
• 16.濾鏡程式碼失效問題
• 17.Widget規範
• 18.圖片空隙問題(2015.2.28號新增)
• 　18.1垂直方向上有空隙
• 　18.2水平方向上有空隙
• 　18.3table中的圖片在垂直方向上有空隙(京東)
• 19.倒計時特效失效問題
• 20.程式碼過濾問題
• 　20.1css樣式過濾
• 　20.2html標籤過濾

1.會用瀏覽器

如果你想裝修店鋪，而又不會使用瀏覽器的“審查元素”功能，一遇到問題就開始撓頭的話，即使你把頭皮撓破，問題還是解決不了！因為你根本就沒有找對方法！

有人開始不服了，某人說：“我本身就不是個淘寶美工，我用審查元素功能有個屁用啊！”

我要說：“你不做美工可以，有本事你別使用電腦瀏覽網頁啊！”

······

只要你瀏覽網頁，你就得用瀏覽器。至於學會這個“審查元素”功能有什麼好處，這個要看你個人用到什麼方面上了。廢話不說了，進入正文。

下面簡單的說下如何使用瀏覽器的“審查元素”功能。藝靈建議大家使用以下一系列瀏覽器中的任意一種：Chrome(谷歌)、Ff(火狐)、Opera(歐朋)、360極速、360安全、淘寶、搜狗等。如果瀏覽器自帶雙核，建議切換成“極速模式”。(這裡列舉的雙核瀏覽器，建議更新到最新版本。)接下來以圖文的方式，教新手如何將雙核瀏覽器切換成極速模式。以360安全瀏覽器為基準進行演示，具體請看下圖一：切換完成後再教新手如何使用瀏覽器的“審查元素”功能，具體請看下圖二：

1.1趁熱打鐵

剛講了審查元素的用法，下面我們來趁熱打鐵一下，舉個栗子。上圖：上圖所示的是某下載網站中dreamweaver cs6綠色版下載頁面的截圖。對於那些對下載網站不瞭解的小朋友來說，相當多的一部分人會毫不猶豫的點選紅框中的連結，然後坐等下載完成。看似圖中有好多渠道的連結，起碼最少有7個吧。那麼問題來了：問：箭頭所指的區域內有幾個渠道的下載連結。

答案即將公佈，不要走開，廣告過後，精彩回來！
大葵花爸爸課堂上課了！......
左手拿著教科書，右手拿著打火機，哪裡不會點哪裡！爺爺再也不用擔心沒人陪我玩啦！......
不管是現在，還是在遙遠的未來......
廣告完畢，精彩回來。想知道答案者請繼續往下看
真相↓

真是不看不知道，一看嚇一跳啊！騷年，學會使用審查元素吧，藝靈只能幫你到這兒了。最後嘮叨一句：如果你的時間夠充足的話，可以到本站導航上面的“資源下載”中下載淘寶店鋪裝修零基礎教程專題講解01_會用瀏覽器和熟悉後臺-藝靈設計視訊，看裡面具體案例應用。

2.熟悉店鋪後臺

說到裝修店鋪，不需要你把後臺所有功能都吃透，但基本的一些功能必須要了解！群內有很多新手會問一些小兒科的問題，例如：店招下10px問題、全屏店招、二級頁面全屏背景等等問題，（後面會一一講到）其實這些問題都可以通過後臺設定來解決。多麼簡單的事情，可在他們眼中卻是難於登天。我在經過多次思考後總結出2點原因：
1.對後臺不熟悉，80%的功能沒有親自測試使用過；
2.不看字！

上面列舉的2點原因中第2點最為嚴重！基本上隔三差五的都會有這種新手來找我，歸根結底還是不看字引起。下面來看一個6號的真實案例。我先來描述下問題吧。

2015.1.5號群內一網友在qq上面問我關於“淘寶店鋪二級頁面全屏背景”的問題。他當時發來一個連結，然後我把背景提取出來後發給了他。然後他可能不知道怎麼操作，然後我又以之前的截圖案例發給了他。其實我是知道他還會來找我的，結果真的又來了。啥也不多說，仔細看聊天記錄，發現問題所在吧。有此類問題的需要注意，沒有的話可以跳過看下面的內容了。圖三：

類似這種的例子還有很多很多，藝靈就不一一列舉了。下面我們來看下官方給出的淘寶C店專業版和基礎版的區別，請看下圖四：

如果想了解更多，可以點選淘寶官網地址：http://wangpu.taobao.com/wangpu/comparation.htm

下面我們到後臺中看一看那些常用且常被忽視的地方。圖五：注意上面紅框中的內容，“店招下10px問題”、“全屏店招背景”、“二級頁面全屏背景”這些都可以在後臺解決。當然，後臺中還有其它的一些內容，這個就自己摸索吧。

下面一段內容於 2015.5.25號新增

唉，有些看官的店鋪已經升級成了新版本，然後。。。。好多功能就不知道怎麼改了，讓我說什麼好呢？！不就是個升級成新版本嘛，基礎功能都還在的好不！如圖：

功能自己再找吧。 (新增內容完畢)

另外再說兩點經驗。
經驗一：程式碼需要放到新建的自定義頁面測試，不要直接放到首頁測試。
理由：如果你的店鋪每日流量巨大的話，你這樣直接在首頁裝修測試程式碼，使用者進來時看到店鋪零亂不堪，你覺得使用者還有心情繼續在你店鋪看下去嗎？
如何新建自定義頁面？請看下圖六：
經驗二：測試程式碼要釋出不要預覽。
理由一：自2014年4月中旬左右開始，預覽頁與釋出頁效果會不同。主要是由於某些原因（修改銷量氾濫+需要修復漏洞的地方過多等其它原因），因此淘寶不得不加強了後臺的過濾項以及修復bug漏洞。即使一些操作在後臺儲存時沒有被過濾掉，但釋出後系統會進行二次更深的過濾（儘管現在仍有修改許可權，此處略去一萬字漏洞說明）。所以最後展現給使用者的是釋出後的頁面而不是預覽頁的內容。
理由二：預覽頁僅自己在當前頁面可見，釋出後大眾可見！（很多新手在群內求助問題時發的連結80%都是預覽頁，你在逗我玩麼？！）
釋出按鈕在哪兒？裝修頁面右上方，具體請看下圖七：

3.邊框問題

3.1去圖片邊框

問題描述：在ie瀏覽器中，如果超連結內包含有圖片。預設情況下，當滑鼠滑過這個超連結時，圖片會有一個深藍色的邊框。如圖八：

解決方案：將圖片的border屬性設定為0或none即可。

<a href="連結自填" ><img src="圖片地址" style="border:0"> </a>

3.2去熱點輪廓(邊框)

問題描述：預設情況下，圖片上的熱點在獲取焦點時會顯示熱點的輪廓。不同瀏覽器下顯示顏色均不同。如圖九：

解決方案：將熱點的outline屬性設定為0或none即可。

<img src="圖片地址" usemap="#Map" />
<map name="Map" id="Map">
　<area shape="rect" coords="14,23,71,57" href="#" style="outline:0" />
</map>

知識延伸：無論是圖片還是熱點還是其它標籤有邊框，都可以通過style="border:0;"或style="border:none;"來解決。

如果以上兩種方法還不會操作的話，可以點選網站導航上面的“線上生成”，然後在右側找到“清除圖片空隙”，滑鼠猛戳進去，在上面的文字框中輸入自己的程式碼後點擊右側的“生成程式碼”即可在下方生成新程式碼，複製程式碼到店鋪中即可。如圖十：

4.超連結問題

4.1去超連結下劃線

問題描述：超連結的預設狀態下會有下劃線。如圖十一：

解決方案：將超連結的text-decoration屬性設定為none即可。

<a href="連結自填" style="text-decoration:none">藝靈設計</a>

4.2圖片上任意地方新增超連結問題

通常情況下在一張圖片上任意地方新增連結的話，大多新手都是用熱點地圖。除了用熱點外，還可以使用透明超連結定位到圖片上面。這種方法也是常常用到的，但真正會用並處理的很好的人並不多。因為正常情況下，絕對定位後內容為的超連結雖能在-webkit核心瀏覽器下可點選，但在ie瀏覽器中卻失效。

問題描述：絕對定位後內容為空的超連結在ie中無法點選。如圖十二：

解決方案：給超連結設定background等相關屬性即可。相關文章：ie中絕對定位後的bug。

<a href="連結自填" class="呼叫官方絕對定位類名" style="position:absolute;left:auto;top:auto;display:inline-block;width:50px;height:20px;border:1px solid #f00;background:url(about:blank)"><!--此處內容為空--></a>

4.3淘寶天貓店鋪錨點跳轉失效

問題描述：無論是淘寶店鋪還是天貓店鋪，點選錨點連結後不會跳轉，錨點失效。（同一模組內除外）

解決方案：放棄自定義錨點名，使用系統模組中的id即可。相關文章：淘寶店鋪中錨點跳轉失效問題。

<a href="A#id">這裡是自己的內容</a>

程式碼框架說明：1.A可省略，表示頁面網址。如果是在當前頁面內做錨點，A可省略；如果是兩個頁面間做錨點，A為需要跳轉到頁面的網址。
2.黃色高亮id為模組id標識，可在頁面中通過“審查元素”功能獲取id，替換即可。詳情請點選上方相關文章看具體應用案例講解教程。

5.下邊距問題

5.1店招下10px問題

說起這個店招下10px問題，首先搞清楚你的店鋪是“天貓B店”還是“淘寶C店專業版”還是“淘寶C店基礎版”。明白這一點至關重要！可是很多人都不管這個，聽別人說店招上有個關閉10px的單選框就跑到後臺去找，結果找了半天也沒有找到。不是你沒有找到，而是你的店鋪根本就沒有那項功能！至於這個關閉10px的單選框長什麼樣，具體的請往回看上面的圖五。

問題描述：預設情況下，店招下面會有10px的空隙，如圖十三：

解決方案：如果店鋪是天貓B店或者是淘寶C店專業版的話，可以從後臺背景設定中選擇關閉10px即可；如果是淘寶C店基礎版的話，不用找了，後臺中沒有這個功能，只能用背景來掩飾，具體程式碼如下：

body{background-image:url(圖片連結);background-position:50% 115px;background-repeat:repeat-x;}

程式碼說明：1.在ps中處理好圖片，高度需要設定為160px。其中，150~160px這之間的10px內容為替補圖案。
2.將圖片上傳到自己圖片空間，然後替換掉圖片連結即可。至於這段程式碼放哪裡呢？當然是放店招裡面了。如圖十四：相關文章：淘寶店鋪模組間10px問題詳解

5.2模組下10px/20px問題

問題描述：出於佈局美觀，淘寶將店鋪模組統一設定了一定距離的下邊距。如圖十五：

解決方案：絕對定位+負值。

.ylsj-mt10{margin-top:-10px}//程式碼放到css入口中

相對而言，屌絲店鋪都沒有購買旺鋪css，因此這個方法也就不行了，需要另找他法。這時，我們可以利用絕對定位+負值。

<div style="height:(H-h)px;" >
　<div class="A" style="top:auto;">
　　<div class="A" style="top:-hpx">
　　　<!--自定義程式碼區-->
　　　<!--此程式碼可解決任意自定義模組下邊距問題，中間最多可插入一個系統模組。需要注意的是：當店鋪為淘寶C店基礎版時，店招下的第一個模組無法清除此模組與店招之間間距，解決方法見5.1店招下10px問題-->
　　</div>
　</div>
</div>

程式碼說明：H：自定義內容的高度；h：模組下邊距數值，當店鋪為淘寶C店基礎版時，h為20；當店鋪為淘寶C店專業版或天貓B店時，h為10；A：可用絕對定位樣式。例如：淘寶C店使用footer-more-trigger等，天貓B店使用sn-simple-logo等。使用時記得修改系統屬性。（建議嘗試理解原理，後面全屏框架會繼續使用此框架）如不會修改程式碼，可使用本站的相關軟體“清除淘寶店鋪模組下邊距工具 ”免費線上生成即可。

5.3檢視下邊距具體值(2015年3月8號臨時更新此條)

就在剛才，又有一個小夥伴進群求助這個下邊距的問題了。雖然我的軟體裡面已經設定了此功能，但看似事情比想像的複雜。為什麼呢？因為同是專業版，這個下邊距還有兩個不同的版本！什麼？不會吧！我們還是用圖來說話吧。不明覺厲的看官可以按照本文開篇目錄1中的方法跟著藝靈一起來操作看個究竟。

有店鋪的可以直接進入自己店鋪首頁，沒店鋪的可在淘寶中隨便點一款產品然後進入店鋪。進入後我們把滑鼠放到導航下面的任意一張圖片上(實際上是任意一個自定義模組上)開始操作。1.圖片上右鍵--2.審查元素--3.向上查詢父級skin-box tb-module tshop-pbsm tshop-pbsm-shop-self-defined--4.看右側顯示的樣式值。完整操作如下圖：

上圖是兩個專業版店鋪的對比圖，從圖中右側可以看出一個是margin-bottom: 20px;一個是margin-bottom: 10px;，所以呢，在套程式碼時有必要看看自己店鋪的下邊距到底是多少哈。

6.顯示已隱藏的模組/店招

6.1顯示已隱藏的店招

問題描述：部分新手複製別人的程式碼或者自己腦洞大開寫了一個display:none放入店招或模組中，結果釋出後再回到後臺裝修時發現店招不見了......

解決方案：其實方案有兩種，但大多數新手一種都不知道......
方案一：後臺備份中復原（新手推薦）。步驟：進入後臺→滑鼠放到裝修上右鍵→點選模板管理→左側點選我備份的模板→選擇店招被玩壞前的一次備份→滑鼠左鍵單擊→應用備份即可。如果看不懂文字，那麼我再來上一張教程圖，如圖十六：方案二：後臺審查元素中復原。這種方法苦逼了很多新手，早在文章開篇我就說了要學會瀏覽器的審查元素功能，某些新手偏不聽。現在需要用到審查功能了，跟不上了吧。簡單來說，在審查元素下，修改模組高度即可復原。如圖十七：相關文章顯示已隱藏的店招

6.2顯示已隱藏的自定義模組

問題描述：除了上面6.1的方法隱藏掉店招和模組外，還有一些其它方法隱藏掉模組。例如：自定義模組不設定高度、修改原始碼後提交導致模組異常等。

解決方案：同6.1的解決方案。

7.全屏問題

7.1全屏店招

預設情況下，店鋪中的店招最大寬度是950px/990px。其中淘寶C店是950px，天貓B店在去年已調整成990px。但如果從“店鋪動態評分”中進入店鋪，店招寬度還是隻有950px的哦，這個應該屬於淘寶更新樣式不到位引起。如圖十八：

問題描述：由於店鋪強制限制了店招的寬度，因此無法突破950px/990px佈局實現全屏。

解決方案：背景設定/開通旺鋪css修改系統樣式/設計師模板/模組漏洞......

其中，背景設定適用於大眾，學會這一招已經足夠了。還是來看看這招如何使用吧。
方案一：頁頭背景（推薦）。步驟：進入後臺→滑鼠放到裝修上右鍵→點選樣式管理→左側點選背景設定→點選右側的更換圖片→上傳圖片→儲存即可。此文字的配套圖已在圖五中列出，此處就不重複了。
方案二：body背景。程式碼如下：

body{background-image:url(圖片連結);background-position:50% 115px;background-repeat:repeat-x;}

此程式碼的配套截圖在5.1中已列出，忘記的請回滾到相關內容區。
方案三：修改系統屬性，適用於已開通旺鋪CSS的天貓店鋪的壕級別賣家。程式碼如下：

.tshop-pbsm-shop-custom-banner{overflow:visible;}//天貓店鋪暫未過濾。原理：修改相關父級屬性成position:static或overflow:visible;均可

將以上程式碼放到店鋪的css入口中儲存即可實現正宗的全屏店招，因為寬度已突破990px限制。相關文章：天貓店鋪與c店導航突破寬度限制
方案四：購買設計師模板。說明一下，不是所有的設計師模板都能突破950px/990px寬度。當然了，少數設計師模板中自帶css入口，這種牛b模板不買實現是對不起射雞師！！！
方案五：模組漏洞。後臺中修改資料達到新增牛b模組的效果。相關文章：淘寶bug之設計師許可權完爆旺鋪CSS，曝淘寶網往期改銷量多處漏洞
方案六：其它漏洞。(暫不公開)

7.2全屏店招1px白邊

問題描述：當顯示器的解析度為1920*xxx時，店招會有1px白邊。如圖：

解決方案：全屏背景中的空白區域寬度小於店招寬度即可。舉個栗子：店招區寬度為950，則全屏背景中的空白區為949即可。

1px真相：簡單點來講就是#hd的寬度不等於全屏背景的寬度。

什麼？不等於？

對，你沒有聽錯，二者在大多數情況下都是不等於的。如果你想知道事情的真相，就得使用文章開頭講的審查元素。

審查元素狀態下我們可以發現這個#hd沒有設定寬度，學過div的都知道，一個塊物件在不設定寬度時預設是自動寬度，也可以理解為寬度自適應瀏覽器。這樣一來，這個#hd就不等於1920px了，但是由於背景設定的是水平居中，所以在小於1920px的螢幕下，兩者還是完全吻合的，不存在1px白邊問題。

但為什麼在1920px畫素下就會有白邊呢？難道解析度中的1920px不等於圖片的1920px嗎？嚴格來講答案是：瀏覽器的1920px不等於圖片的1920px！不要忘記了瀏覽器滾動條這個可有可無的條件。當電腦設定了1920解析度後，瀏覽器右側無滾動條時的寬度才是1920px；而淘寶店鋪中這一條件卻極少出現，因為首頁只有一屏的店鋪肯定不是賣產品的，多為無人打理或實驗店鋪。

7.3全屏程式碼框架

現在講究的都是高階大氣上檔次，至於如何才能達到老闆心中想要的大氣效果呢？那你就讓它足夠大，足夠突出，足夠吸引眼球不就完了。可是，問題來了......

問題描述：預設情況下，自定義模組內容寬度最大為190px/750px/990px，無法實現正宗的全屏。

解決方案：使用全屏框架/開通旺鋪css修改系統樣式/設計師模板/模組漏洞......　相關文章：純css實現超寬圖片全屏居中（相容淘寶店鋪）

<div style="height:(H-h)px;" data-title="全屏程式碼框架" >
　<div class="A" style="position:absolute;top:auto;left:0;margin-left:50%;width:auto;border:0;padding:0;background-color:transparent;">
　　<div class="A" style="position:absolute;top:-hpx;left:-960px;width:auto;height:Hpx;border:0;padding:0;background-color:transparent;">
　　　<div style="width:1920px;margin:0" >
　　　　<!--自定義程式碼區-->
　　　　<!--此程式碼可解決任意自定義模組下邊距問題，中間最多可插入一個系統模組。需要注意的是：當店鋪為淘寶C店基礎版時，店招下的第一個模組無法清除此模組與店招之間間距，解決方法見5.1店招下10px問題-->
　　　</div>
　　</div>
　</div>
</div>

程式碼說明：H：自定義內容的高度；h：模組下邊距數值，當店鋪為淘寶C店基礎版時，h為20；當店鋪為淘寶C店專業版或天貓B店時，h為10；A：可用絕對定位樣式。例如：淘寶C店使用footer-more-trigger等，天貓B店使用sn-simple-logo等。（使用時記得修改系統屬性）

適用範圍：此全屏框架程式碼僅適用於淘寶C店專業版首頁、天貓B店首頁、天貓B店自定義頁面，淘寶二級頁面不支援，淘寶C店基礎版首頁需要做修改。如果不會修改程式碼，可以使用網站中的相關軟體“萬能全屏程式碼框架生成器”免費生成即可。

7.4自定義頁面全屏

問題描述：天貓自定義頁面可以使用全屏程式碼框架來實現全屏，但淘寶C店卻不行。

解決方案：頁面背景設定/開通旺鋪css修改系統樣式/淘寶bug漏洞......

方案一：頁面背景設定。這種方案是最簡潔有效的了，只需要從後臺上傳背景圖即可。雖操作簡單，但卻有限制啊！圖片不能大於200kb，所以要控制背景圖了，不要太花。色彩越多，最後儲存時就越大。
方案二：修改系統樣式。適用於已開通旺鋪CSS的壕級別商家。程式碼如下：

div{overflow:visible;}　//①
*{overflow:visible;}　　//②　

程式碼說明：①和②都能實現最終效果。其實原理很簡單，