進入正文之前有必要說明下：藝靈分享的教程主要以裝修經驗為主，是為了解決看官在實際裝修中遇到的代碼問題和突破思維瓶頸。至于店鋪收益這個問題不在范圍之內，謝謝理解。

今天這篇文章主要講的是：裝修阿里巴巴店鋪時，如何繞過過濾機制，成功讓css顯示出來。

如果按正常流程來講，這篇文章需要到一個月后才能發布。但由于某些原因，所以提前發布下，也希望看官在看完文章后能學到點什么。

一、阿里巴巴的店鋪裝修已經不像以前那么自由了

相對于淘寶和天貓裝修而言，折騰阿里巴巴店鋪的看官非常少。

早在16年6月的時候，藝靈曾寫過一篇有關阿里巴巴裝修的教程文章--《幫您節省千元的阿里巴巴1688店鋪裝修教程》

文章主要介紹了：阿里巴巴的裝修方法以及可以寫自定義css的事情。

就在不久前，突然有不少小伙伴向藝靈反應代碼失效的問題。經親自驗證后才發現：原來阿里巴巴店鋪也開始走淘寶的老路了，什么絕對定位屬性、自定義css啥的都已經被列到了裝修黑名單中！

二、時效性

雖然現在的阿里巴巴在裝修代碼上已經做了過濾檢測，但我們還是有辦法繞過過濾的。

如果看官之前一直有看藝靈寫的文章的話就會發現一個有趣的現象，那就是：“每次公布的破解方法很快就失效了......”這個確實有點尷尬，雖然本文是寫阿里巴巴的方法，相信在很短的時間內，本文提供的方法也會被修復。所以呢，看官需要認真看下面的每一個字，因為，因為，內有乾坤！

三、破解之道

對于我們這群碼農來說，誰還不會個html轉義字符和Unicode編碼啊！想想之前玩淘寶的時候，很多大神都用這兩把刷子得到了想要的結果！

咱們言歸正傳。對于html轉義字符，看官只需要記住以下兩個即可！<和>。

<對應的是html代碼中的<，也就是左尖括號；

>對應的是html代碼中的>，也就是右尖括號。

3.1、html轉義字符

還是來舉一個例子吧！代碼如下：

<div class="box" style="position:relative;color:#f00">這是一個div標簽，文字是紅色。</div>

下面我們將上面的代碼保存到阿里巴巴店鋪中來驗證下吧。登錄步驟就省略了，進入店鋪后，鼠標放到任意一個自定義內容區的右上角，然后點擊編輯，接著就直接把代碼粘貼進來，然后點擊確定即可。完整流程圖：

在自定義內容區中直接粘貼代碼

此時點擊預覽可以看到效果了，效果如圖：

預覽時代碼沒有過濾，效果顯示正常

3.2、為什么不點擊源碼

如果看官習慣了其他平臺的裝修流程的話，肯定會問一個問題：“為什么不點擊源碼，然后在源碼模式下粘貼代碼”？

這么說吧，其實最早這個方法是可行了。就在藝靈寫完本文開頭提到的那篇文章后不久，就變成現在就這樣了。在源代碼模式下粘貼是沒有多大作用的。

我不信！

不信？上圖：

現在是源代碼模式下粘貼代碼

看官注意看我粘貼進去的代碼。

粘貼后點擊確定，然后在預覽頁面看下效果。效果如圖：

預覽時看似正常

喲，有效果，代碼沒有屏蔽，鑒定完畢！

看官確定？要不來看看源碼？上圖：

看源碼時才發現部分css屬性已被過濾掉了

怎么樣，有沒有發現相對定位的屬性被過濾掉了？？

3.3、原來這么簡單！

好吧！那我現在知道了：就是在編輯模式下將左右尖括號轉義下，然后再粘貼代碼就可以了，原來這么簡單！

如果看官有這種想法的話，藝靈要恭喜看官了：你咋不上天呢！有本事你寫個css內部樣式表！

30秒后

不科學啊，怎么又被過濾了，這什么破原理......如圖：

編輯模式下粘貼內聯樣式表會被直接過濾

怎么樣，是不是有點懵？

3.4、html轉十進制

其實繞過style樣式表的方法有很多，藝靈就再介紹一種，算是拋磚引玉下吧。至于剩下的一些方法，此處不便直說。不要問為什么，因為你知道的太多了！會被......

剛我們將左右尖括號進行了字符轉義，下面我們還可以轉成十進制。

左尖括號<轉義后就是<；

右尖括號>轉義后就是>。

好，轉義完成后的代碼如下：

<style>.box{position:relative;background:#ccc}</style>

還是同樣的操作，直接復制上面的代碼，然后扔到自定義模塊中即可。如圖：

將左右尖括號轉成十進制即可

怎么樣，這回css樣式表成功顯示了吧！

四、總結

為了安全起見，我們可以用十進制來修改我們的源碼。至于上面的演示代碼，藝靈已整理好，有興趣的看官可以直接復制后放到店鋪中看下效果。

<div class="box" style="position:relative;color:#f00">這是一個div標簽，文字是紅色。</div>

<style>.box{position:relative;background:#ccc}</style>

上面的代碼最終效果如圖：

最終效果是灰色背景的盒子中顯示紅色字

五、視頻

下面藝靈就本文的方法錄制了一個小視頻，可以看下里面文字總結。由于系統在pc端對視頻不友好，所以想看視頻的看官用手機訪問即可。

章適合具備基礎的HTML和CSS知識，對于阿里巴巴店鋪裝修有興趣的網友。也是對網絡上裝修教程或分享不太多的一個補充。

文章的做法和看法是基于阿里巴巴的國內PC店鋪裝修的前提，其他阿里手機店鋪、阿里國際未必適用。本文是適合具備基礎的HTML和CSS知識的網友瀏覽，且對店鋪數據管理(圖片上傳，表單填寫的理解)有基礎操作經驗或認知的人。之所以接觸阿里巴巴的店鋪裝修，主因是有朋友需要這方面的幫助。

對于各大網店的裝修真心沒涉足過，所以一開始登錄裝修后臺后，各種好奇心各種研究，各種查找店鋪的開發者文檔之類的東西，結果寥寥無幾，而且幫助不大。為了方便以后再次開發及能幫助新接觸店鋪裝修的網友們，所以即使是我這樣一個不善碼字的人，也覺得有必要將阿里店鋪裝修這方面的學習研究過程寫成一系列的文章。

好的，別的不說了，進入正題吧：

1. 想要學習或研究這方面的開發，大家最好還是要有一個店鋪能夠進行操作測試

2. 登錄后臺。進入店鋪裝修

一般我們看到的都是這兩個模式的界面(全屏布局)

這個是頁面布局模式（主要是展現各區塊的布局，你設置的圖片和產品不會在這里呈現）

這個是可視化設計模式（展現各區塊的實際用圖，產品等，一般情況下只是靜態效果）

至于在哪個區方便操作，這個我就不多贅述啦，實際操作的時候，網友們會自行選擇。值得一提的是兩個區實際上功能都是一樣的，最后也有添加版塊，在上兩圖的最后紅框已經明顯標注了。

添加的版塊里面都可以有些什么?

上圖可以看到全部可添加的基礎版塊，后面的模板和高級版塊是你購買的模板和阿里提供的兩個小高級版塊，這里不再敘述了。其中基礎版塊里面有三四個版塊是比較重要和實用的：

a. 全屏大圖

這個版塊是可以選擇一張大圖，然后按照全屏的寬度來拉伸圖片，并且還可以添加多個熱點區域(可點擊鏈接區域)

圖為給圖片添加熱點(可點擊鏈接區域)

b. 全屏輪播

全屏輪播的功能即使添加一個全屏版塊，多張廣告大圖切換的功能。

其中輪播屬性還包括了圖片高度，間隔時間，效果等設置。

C. 自定義版塊(重點重點重點)

自定義模塊是開發者使用的一個模塊，除了能給你寫入你自己的代碼，代碼能做什么是你自己的編碼水平問題了。不過要注意的一點是，這里能加入的代碼基本也就只有HTML和CSS，JS代碼局限比較大，一般不建議往里面嵌入JS，而且加入的代碼模式也是很有講究才能生效。

自定義模塊分為源代碼模式和編輯模式。

源代碼模式是開發者常用的模式

天要跟大家分享的是

店鋪導航條CSS樣式

﹀

﹀

﹀

1

店鋪導航條

相當于店鋪里面的菜單，通過它跳轉到其他頁面

就是這個東西 ↓↓↓

正常情況下，它應該是這個樣子的 ↓↓↓

（有一點丑丑的）

2

須知

導航開放了css裝修功能，可以用css代碼，裝修出超炫的效果

它并不是只有那個藍色的版本。。。

表演開始

修改導航條的背景顏色，代碼 ↓↓↓

.skin-box-bd .link{background:#000000;}

【請將代碼整條復制，可修改部分已加粗，具體色號可自行查找】

代碼 ↓↓↓.skin-box-bd .link{background:url(圖片鏈接);

代碼 ↓↓↓.skin-box-bd .link{background:url(圖片鏈接);

代碼 ↓↓↓

.skin-box-bd .menu-list{background:#000000;}

當然也可以替換成圖片，代碼 ↓↓↓

.skin-box-bd .menu-list{background:url(圖片鏈接);}

， 改色代碼 ↓↓↓

.skin-box-bd{background:#000000;}

換圖的代碼↓↓

.skin-box-bd{background:url(圖片鏈接);}

基本上做完了，看一下成品：

（可能是因為要做教程，刪刪改改太多次，備份有點亂，跟別人的不太一樣，本來應該是這個樣子的 ：

圖片來自論壇：

）

【須知：整個部分包括 字里 以及 字外，所以需要兩條代碼↓↓↓】

字里：.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}

字外： .skin-box-bd .menu-list .menu-selected .link{background:#000000;}

看一下成品：

這幾條分割線的顏色還沒有改，更改代碼 ↓↓↓

.menu-list .menu{border-color:#000000;}

再加一條代碼：

.all-cats .link{border-color:#000000;}

字稍微大一點就放不下。。。。。

所以，辣么寬寬寬的間距代碼 ↓↓↓

.menu-list .menu{background:#顏色;margin:0;padding:0px 增加的寬度px;}

……有變化嗎？？？ 字真的太小了，字大大大代碼 ↓↓↓

.menu-list .menu .title{color:#顏色代碼;font-size:字號px;}

但是，為什么這個所有分類總是要搞特殊！！！

解決它的代碼：

.all-cats .link .title{color:#顏色;font-size:字號px;}

【須知：字號最好不要超過20px，否則 ↓↓↓ 】

完成了……但是這個字就是有點單調，就沒有鼠標滑過變色之類的特效來調戲一下它這個按鈕？？？

不知道為什么不考慮它作為按鈕的感受……

管他呢 ……

代碼接好 ↓↓↓

.menu-list .menu-hover .link{background:#000000;}

（看吧，跑出來的“類”已經消失了……）

動圖了解一下：

誒，這個背景變了，這個字……能不能也變一變呢……

鼠標滑過字體變色代碼 ↓↓↓

.menu-list .menu-hover .link .title{color:#FFFFFF;}

以上，導航條一級菜單修改完畢

這個意思就是

二三級菜單沒改

就是這個↓↓↓

那么這個要怎么改呢？

請繼續看表演 ↓↓↓

二級菜單1字號及顏色 ↓↓↓

.popup-content .cats-tree .fst-cat .cat-name{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}

2下拉菜單背景顏色：

.popup-content{background:#000000;}

3鼠標滑過二級菜單，變換背景色：

.popup-content .cats-tree .cat-hd-hover{background:#000000;}

阿偶，我忘記三級菜單的感受了……

看來字體也要變一變

4鼠標滑過二級菜單，變換字體顏色：

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}

5二級菜單增加間距

有人就說了，下拉菜單跟那個標題湊太近了，不好看，那么我們應該打死他滿足他的要求，代碼 ↓↓↓

.popup-content .cats-tree{margin:0 0 50px 0;}

三級菜單1字號及顏色

.popup-content .cats-tree .snd-pop-inner{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}

.popup-content .cats-tree .snd-pop-inner{font-size:字號px;color:#顏色;}

（兩條都請務必試一下，可能是因為操作過于頻繁，我的電腦說如果文末不給小心心它就不給看成品，不清楚是不是電腦卡了的緣故）

（然而預覽它沒給面子，是不是你沒有在文末點小心心？！！！）

2更改背景色

.popup-content .cats-tree .snd-pop-inner{background:#000000;}

顏色什么的已經自暴自棄了……沒想到它居然有反應

3鼠標滑過，變化背景色

.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}

4鼠標滑過，變化字體顏色

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}

以上，是一二三級菜單的代碼

另外

補充：

下拉菜單的小圖標

所有分類小圖標

.all-cats .link .popup-icon{background:url(圖片連接);}

二級菜單小圖標（需要有三級菜單）

.popup-content .cats-tree .fst-cat-icon{background:url(圖片連接);}

三級菜單前加白色小圖標

盡量不要太大，不然也是會GG的……

.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}

以上，真的就是全部了

看久了辣眼睛

排版有些混亂，將就看啊

【再強調一次：代碼需要整條復制，全部都是英文狀態編輯，不能用中文狀態】

乖

我是美工小白

各位晚安

(*＾3＾)/～☆