酷知百科網

位置:首頁 > 母嬰教育 > 學習交流

淘寶店鋪導航CSS代碼使用修改技巧

詳解淘寶店鋪導航CSS代碼使用修改技巧

操作方法

(01)首先我們進入到店鋪的裝修頁面,將鼠標放在導航上面會出現“編輯”字樣,單擊,選擇“顯示設定”選項卡

淘寶店鋪導航CSS代碼使用修改技巧
淘寶店鋪導航CSS代碼使用修改技巧 第2張

(02)1.修改導航分類下面的背景色,代碼如下:-box-bd {background:#000000;}效果如下

淘寶店鋪導航CSS代碼使用修改技巧 第3張
淘寶店鋪導航CSS代碼使用修改技巧 第4張

(03)如果你想要更加個性,而不想只要簡單的純色塊的話,可以自己做圖片,然後連接上去,代碼如下:-box-bd .link{background:url(http://img03.taobaocdn.com/imgextra/i3/682206429/T210IOXCdXXXXXXXXX_!!682206429.jpg);}將“圖片連接”換成你的圖片的連接就可以了,一般都是自己做好然後上傳到淘寶圖片空間,然後連結就可以了!在圖片空間點擊對應圖片下方的“連結”按鈕可以直接複製圖片連結,替換到代碼裏就可以了!

淘寶店鋪導航CSS代碼使用修改技巧 第5張
淘寶店鋪導航CSS代碼使用修改技巧 第6張
淘寶店鋪導航CSS代碼使用修改技巧 第7張

(04)導航背景色代碼(除去“所有分類”)如下:-list {background:#000000;}

淘寶店鋪導航CSS代碼使用修改技巧 第8張

(05)導航欄文字(除去“所有分類”)如下:-list e{color:#顏色代碼;font-size:字號px;}

淘寶店鋪導航CSS代碼使用修改技巧 第9張

(06)“所有分類”的背景色代碼如下:-cats {background:#000000;}

淘寶店鋪導航CSS代碼使用修改技巧 第10張

(07)“所有分類”的文字代碼如下:-cats e{color:#顏色代碼;font-size:字號px;}

淘寶店鋪導航CSS代碼使用修改技巧 第11張

(08)二級分類文字代碼如下:p-content -tree -cat -name{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}

淘寶店鋪導航CSS代碼使用修改技巧 第12張
淘寶店鋪導航CSS代碼使用修改技巧 第13張

(09)二級分類背景代碼如下:p-content{background:#000000;}

淘寶店鋪導航CSS代碼使用修改技巧 第14張

(10)三級分類文字代碼(除去“所有寶貝”分類)如下p-content -tree -pop-inner{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}

淘寶店鋪導航CSS代碼使用修改技巧 第15張
淘寶店鋪導航CSS代碼使用修改技巧 第16張

(11)一級導航分類(除去“所有寶貝”分類)分隔線顏色代碼如下:-list {border-color:#FFFFFF;}

淘寶店鋪導航CSS代碼使用修改技巧 第17張

(12)鼠標滑過一級分類導航文字變換背景色代碼如下:-list -hover {background:#000000;}

淘寶店鋪導航CSS代碼使用修改技巧 第18張

(13)鼠標滑過一級分類導航文字變換顏色代碼如下:-list -hover e{color:#FFFFFF;}

淘寶店鋪導航CSS代碼使用修改技巧 第19張

特別提示

注意顏色代碼的提取,可以用ps等工具選擇你喜歡的顏色

製作圖片連結時,注意圖片的大小