天要跟大家分享的是

店鋪導航條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＾)/～☆

什么要寫這篇文章呢，起因是偶然間看到一個論壇里面，有人噴我，說我免費分享的一些特效代碼沒用，說我是因為購買了CSS權限

看完以后，老濕我是十分之震精。我店鋪連專業版都不舍得買，用的是基礎版的店鋪。怎么會花錢去買2400一年的CSS權限呢，作為一名代碼老司機，在網上還需要花錢，這是對老司機最大侮辱啊。言歸正傳，那么如何判斷一個店鋪是否購買了CSS權限呢。

準備從下面幾個方面好好聊聊

【目錄】：

1. 如何判斷店鋪是否購買了CSS權限

2. 沒有購買CSS權限，為什么有些店鋪也有特效

3. 怎么分辨是不是購買模板自帶的特效

4. 是否有必要購買CSS權限

5. 店鋪是否需要做特效

6. 代碼有什么用

米色老濕暫時只能想到這些了，如果有其他問題，可以去我的代碼群交流。

一：如何判斷店鋪是否購買了CSS權限

看上圖，可能這里上傳時候 自動把圖片壓縮了，看的不清楚，沒關系，老濕是很人性化的，很體貼的，很善解人意的，所以我吧圖上紅框的東西寫出來【#page #content】

就是這個東西，如果你去一個店鋪，發現有特效，你就鼠標在有特效的地方，右鍵-審查元素。然后在右邊CSS區域看看，如果是類似于

#page #content xxxx {樣式}

那百分比是購買了的，反之就沒有。

那有小伙伴要問了，那沒有購買的 是什么德行？

#page #content .tshop-pbsm-shop-nav-ch xxxx {樣式}

看到區別沒有，多了點東西。

二：沒有購買CSS權限，為什么有些店鋪也有特效

有小伙伴可能有上面的疑惑，為什么有些店鋪沒有購買也能做特效，比如 有個叫米色的屌絲店鋪就有

先說說特效怎么實現的，特效類似于動畫，動畫都知道，有對比才會有動畫，那特效也是有經過前和經過后的對比，才會有特效。

我們寫特效，其實就是用到了，鼠標經過的狀態。:hover

所以要實現特效，無非是想各種辦法讓需要特效的地方產生這種變化。

1. 有人直接調用官方帶hover的樣式實現

2. 有人直接在頁面寫入CSS樣式實現（模塊移植，寫入CSS等）

3. 有人利用WIDGET組件模擬的特效。

等等方法很多，但無非就是產生這個過程就可以

三：怎么分辨是不是購買模板自帶的特效

一般情況下，判斷方法，有下面幾種

1. 先看看它店鋪最先是不是買了模板（拉到店鋪最下面看）

2. 在有特效的地方右鍵審查元素，看看特效所在的模塊的名字，是不是其他的，如果不是【自定義內容區】基本上可以判斷是模板自帶模塊的效果（如是移植的模塊除外）

所以綜上所述也很簡單，店鋪里面只有自定義內容區我們能寫代碼，如果特效不是寫在自定義內容區，那基本上就是利用模塊或者購買的模板自帶的特效了

四：是否有必要購買CSS權限

米色還是那句話，如果你們公司不差錢，而且理念是 能用錢解決的問題 一般不動手。那么需要頁面做特效，那就購買，方便快捷。

如果你們公司不太注重頁面特效，只是偶爾需要做點效果，那沒必要購買。

其實CSS權限，權限也不是很大（不能用ID選擇器，不能實現動畫等等）至于是不是不能寫懸浮，由于沒有購買過，不清楚。

所以是否購買，根據公司情況來吧。

五：店鋪是否需要做特效

1. 經常有人有這樣的想法，我店鋪沒有特效 不也是一樣嗎？

2. 特效做多了會卡？

3. 現在手機端那么普及，電腦端沒人看了，要特效干什么？

等等會有很多問題

1. 關于這個問題，我一直態度呢，任何技術都沒有好壞，只是看是否適合公司情況，特效是能讓設計更具觀賞性，特效能讓產品的視覺展示更好看。所以技術沒好壞，只看是不是合適自己。

2. 現在互聯網發展比較快，早期的互聯網 只需要放簡單圖片就好，連設計都不需要，為什么現在卻需要設計精美了呢？因為社會的發展，吃瓜群眾的審美會疲勞，想看到不一樣的東西，所以現在代碼特效，3D效果表現，影視動畫等那么受歡迎呢，原因就在這里

3. 不知道有沒有人思考過，同樣是賣產品，為什么商城里面的店鋪 非要裝修的很高大上，而街邊門店大都不注重裝修呢？因為品牌定位不一樣，層次不一樣，受眾也不一樣。

4. 看的東西不一樣，商城為什么要花那么多錢裝修？在我們普通人眼里 可能覺得沒必要，或者換個例子，有錢人裝修房子，花幾十萬買個柜子啥的，我們覺得不可思議，幾百塊的也能用嗎，沒必要買，為什么我們會這樣想，因為我們看的角度不一樣，看的東西也不一樣，所以店鋪需要做特效嗎？在我們一般人眼里覺得沒必要，我隨便設計下，做個熱點靜態頁面就行了，還花那個錢做特效。不知道發現沒有一般大店鋪不僅購買CSS權限，還會購買模板，但是奇怪就在于買了模板一般不用，都是自己編寫代碼特效。可能會有疑問，為什么浪費這個錢？因為大公司要面子，需要這些東西體現公司實力，想一下 如果你去看韓都衣舍店鋪，就是簡單的熱點做的裝修，人內心第一想法是公司實力不怎么樣，反之進去看到頁面很精致很炫，覺得公司有實力。所以是不是可以總結下，一般大公司都會需要做頁面特效，小店鋪就會覺得無所謂。以后隨著互聯網發展，越來越多公司都會做網頁特效。如果只是想做個一般的美工，在小公司上班，那么代碼無所謂了；如果你以后想躋身到大企業上班，那么代碼就很重要了，為什么因為互聯網里什么都需要代碼，現在大部分人不懂代碼，而你會 通用的設計水平，去應聘你覺得大公司會有限招聘誰？（當然了，如果你設計水準特別高，大神級別，依靠設計就能拿到高薪，那可以不在乎代碼）

上面文字比較多，建議找好板凳，買好瓜子花生 坐下來慢慢看

最后，關于這個問題，其實已經不是特效有沒有必要了，而是一個公司實力和營銷是不是需要了。

六：代碼有什么用

像上面說的，現在就是互聯網的時代，很多東西都網絡化了，一個企業也是，想要多賺錢，就必須要多渠道的開通網絡銷售平臺，而這些平臺都需要依靠代碼。

2016年9月我去安徽某空調企業總部做內部員工代碼系統培訓，在和公司總裁一起吃飯的時候，他就說過，2017年公司需要更多拓展網絡渠道，而公司的設計師不懂代碼，跟不上公司的發展計劃，所以急需提升代碼水平。【這里由于未經過公司許可，不方便透露公司名字】

我做了差不多5年的代碼培訓，學生也有很多了，我以前會問他們為什么學習代碼，有人說工作需要，有人說想學完了拿高點的工資等等，很多原因，不管什么原因都預示著一個信息，現在的企業慢慢的都需要會代碼的人才來滿足公司的發展需求。

代碼僅僅只能用來裝修店鋪做特效嗎？答案是否定的，學會代碼可以做很多事情

1. 自己兼職做代碼特效，現在設計業務價格白菜價 很難報高價，而且需要反復修改，吃虧不討好，相反代碼價格是不透明的，代碼業務報價普遍很高。

2. 提高自身競爭力。通用去應聘一個崗位，都會設計，但是你會代碼，公司肯定優先招聘你，而且工資也會高一些

3. 運用在電商平臺，各大電商平臺制作特效 都需要依靠代碼，甚至像京東店鋪 不僅可以寫特效，還可以上架自己編寫店鋪模板。

4. 提高安全意識，現在網絡安全很嚴重，一不小心就中標，很多人不懂

5. 制作自己的個人網站。現在是個性化時代，有自己的個人網站 會顯得專業很多

6. 方便生活。比如我自己沒事也編寫了很多在線生成工具。也做了一個免費看VIP視頻的工具，前段時間還自己編程，編寫了一個程序，可以遠程操控自己的微信和獲取微信信息，把自己的微信做一個自動回復功能等等。代碼可以做很多事情。

7. 工作需要。通用的裝修店鋪的工作，會代碼可能半天搞定，不會代碼 折騰一兩天最后還是要問別人怎么做，無形中增加了工作時間。我們可以將一些效果做成模塊，以后裝修店鋪，直接把模塊放入店鋪，隨意調整模塊位置，這樣也能增加工作效率

8. 店鋪運營。不管怎么說電商運營都是基于互聯網平臺的，那運營思路或多或少也需要一點代碼的思維去分析。比如店鋪寶貝優化，其實跟網站SEO優化類似。
   

代碼的作用太多了，這里篇幅有限就不說太多了

寫了好多字，小編腦細胞又損失了幾百萬，大家關注下哦，關注小編不迷路，小編帶你上高速 0 - 0