淘宝店铺导航栏CSS代码 淘宝店铺怎么自定义设置导航栏
\u6dd8\u5b9d\u5e97\u5bfc\u822a\u680f\u7684CSS\u4ee3\u7801\u8fd9\u662f\u5168\u90e8\u4ee3\u7801\uff0c\u5982\u679c\u4f60\u4f1aCSS\u7684\u53ef\u4ee5\u8bd5\u7740\u6539\u4e00\u4e0b\u5c31\u53ef\u4ee5\u7528\u4e86\u3002
\u8bbe\u7f6e\u5bfc\u822a\u6761\u7684\u80cc\u666f\u8272
/* \u5bfc\u822a\u680f\u80cc\u666f\u8272*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;}
/* \u5bfc\u822a\u5217\u8868\u80cc\u666f\u8272*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}
/*\u5bfc\u822a\u6761\u6700\u53f3\u8fb9\u7684\u4e00\u90e8\u5206\u80cc\u666f*/
.skin-box-bd{background:#000000;}
--------------------------------------------------------------------------
\u8bbe\u7f6e\u5bfc\u822a\u6761\u5185\u7684\u201c\u6240\u6709\u5206\u7c7b\u201d
/*\u6240\u6709\u5206\u7c7b\u80cc\u666f\u8272*/
.all-cats .link{background: none repeat scroll 0 0 #00ad08;}
/*\u6240\u6709\u5206\u7c7b\u6587\u5b57\u6837\u5f0f*/
.all-cats .title{color:#\u989c\u8272\u4ee3\u7801;font-size:\u5b57\u53f7px;}
\u4fee\u6539\u201c\u6240\u6709\u5b9d\u8d1d\u201d\u53f3\u8fb9\u5c0f\u56fe\u6807\u4ee3\u7801\u5982\u4e0b\uff1a
.all-cats .link .popup-icon{background:url(\u56fe\u7247\u8fde\u63a5);}
------------------------------------------------------------------------------
\u8bbe\u7f6e\u5bfc\u822a\u6761\u5185\u7684\u4e00\u7ea7\u5206\u7c7b
/*\u4e00\u7ea7\u5206\u7c7b\u7684\u5206\u9694\u7ebf\uff0c\u5b9e\u9645\u4e0a\u5c31\u662f\u53f3\u8fb9\u6846\u7684\u989c\u8272*/
.skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}
/*\u4e00\u7ea7\u5206\u7c7b\u7684\u6587\u5b57\u6837\u5f0f*/
.skin-box-bd .menu-list .menu .title{color:#\u989c\u8272\u4ee3\u7801;font-size:\u5b57\u53f7px;}
/*\u4e00\u7ea7\u5206\u7c7b\u6240\u5728\u7684li \u5217\u8868\u7684\u80cc\u666f\u8272*/
.skin-box-bd .menu-list .menu-selected .link{background:#000000;}
/*\u4e00\u7ea7\u5206\u7c7b\u6240\u5728\u7684li \u5217\u8868\u7684\u6587\u5b57\u80cc\u666f\u8272*/
.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
\u4fee\u6539\u4e00\u7ea7\u5206\u7c7b\u7684\u5bbd\u5ea6\uff1a
.menu-list .menu{background:#\u989c\u8272;margin:0;padding:0px \u589e\u52a0\u7684\u5bbd\u5ea6px;}
\u9f20\u6807\u6ed1\u8fc7\u4e00\u7ea7\u5206\u7c7b\u5bfc\u822a\u6587\u5b57\u53d8\u6362\u80cc\u666f\u8272\u4ee3\u7801\u5982\u4e0b\uff1a
.menu-list .menu-hover .link{background:#000000;}
\u9f20\u6807\u6ed1\u8fc7\u4e00\u7ea7\u5206\u7c7b\u5bfc\u822a\u6587\u5b57\u53d8\u6362\u989c\u8272\u4ee3\u7801\u5982\u4e0b\uff1a
.menu-list .menu-hover .link .title{color:#FFFFFF;}
---------------------------------------------------------------------------------
\u8bbe\u7f6e\u4e8c\u7ea7\u5206\u7c7b\u7684\u6837\u5f0f
\u4e8c\u7ea7\u5206\u7c7b\u6587\u5b57\u4ee3\u7801\u5982\u4e0b\uff1a
.popup-content .cats-tree .fst-cat .cat-name{font-size:\u5b57\u53f7px;color:#\u989c\u8272\u4ee3\u7801;font-weight:bold/bolder/normal;}
\u4e8c\u7ea7\u5206\u7c7b\u80cc\u666f\u4ee3\u7801\u5982\u4e0b\uff1a
.popup-content{background:#000000;}
\u9f20\u6807\u6ed1\u8fc7\u4e8c\u7ea7\u5206\u7c7b\u5bfc\u822a\u6587\u5b57\u53d8\u6362\u80cc\u666f\u8272\u4ee3\u7801\u5982\u4e0b\uff1a
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
\u9f20\u6807\u6ed1\u8fc7\u4e8c\u7ea7\u5206\u7c7b\u5bfc\u822a\u6587\u5b57\u53d8\u6362\u989c\u8272\u4ee3\u7801\u5982\u4e0b\uff1a
.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}
\u4fee\u6539\u4e8c\u7ea7\u5206\u7c7b\u7684\u9ad8\u5ea6\uff1a
.popup-content .cats-tree{margin:0 0 50px 0;}
\u4fee\u6539\u4e8c\u7ea7\u5206\u7c7b\u53f3\u4fa7\u56fe\u6807\u4ee3\u7801\u5982\u4e0b\uff08\u6709\u4e09\u7ea7\u5206\u7c7b\u624d\u4f1a\u663e\u793a\uff09\uff1a
.popup-content .cats-tree .fst-cat-icon{background:url(\u56fe\u7247\u8fde\u63a5);}
----------------------------------------------------------------------------------
\u8bbe\u7f6e\u4e09\u7ea7\u5206\u7c7b\u7684\u6837\u5f0f
\u4e09\u7ea7\u5206\u7c7b\u6587\u5b57\u4ee3\u7801\uff08\u9664\u53bb\u201c\u6240\u6709\u5b9d\u8d1d\u201d\u5206\u7c7b\uff09\u5982\u4e0b
.popup-content .cats-tree .snd-pop-inner{font-size:\u5b57\u53f7px;color:#\u989c\u8272\u4ee3\u7801;font-weight:bold/bolder/normal;}
\u4e09\u7ea7\u5206\u7c7b\u6587\u5b57\u4ee3\u7801\uff08\u5305\u62ec\u201c\u6240\u6709\u5b9d\u8d1d\u201d\u5206\u7c7b\u5b57\u4f53\u5927\u5c0f\uff09\u8fd9\u6837\u5c31\u65e0\u6cd5\u6539\u53d8\u5b57\u4f53\u989c\u8272\uff0c\u6211\u4eec\u4f1a\u7ee7\u7eed\u5b8c\u5584\u8be5\u4ee3\u7801\uff01\u5982\u4e0b
.popup-content .cats-tree .snd-pop-inner{font-size:\u5b57\u53f7px;color:#\u989c\u8272;}
\u4e09\u7ea7\u5206\u7c7b\u80cc\u666f\u4ee3\u7801\uff1a
.popup-content .cats-tree .snd-pop-inner{background:#000000;}
\u9f20\u6807\u6ed1\u8fc7\u4e09\u7ea7\u5206\u7c7b\u5bfc\u822a\u6587\u5b57\u53d8\u6362\u80cc\u666f\u8272\u4ee3\u7801\u5982\u4e0b\uff1a
.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}
\u5728\u4e09\u7ea7\u5206\u7c7b\u524d\u52a0\u4e0a\u5c0f\u5757\u767d\u8272\u4ee3\u7801\u5982\u4e0b\uff1a
.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}
\u6dd8\u5b9d\u5e97\u94fa\u81ea\u5b9a\u4e49\u8bbe\u7f6e\u5bfc\u822a\u680f\u7684\u64cd\u4f5c\u6b65\u9aa4\u5982\u4e0b\uff1a
\uff081\uff09\u767b\u5f55\u5356\u5bb6\u5de5\u4f5c\u53f0\u3002
\uff082\uff09\u627e\u5230\u5de6\u4fa7\u5e97\u94fa\u7ba1\u7406\u70b9\u51fb\u5e97\u94fa\u88c5\u4fee\u3002
\uff083\uff09\u8fdb\u5165\u540e\u53f0\u70b9\u51fb\u5e97\u94fa\u88c5\u4fee\u3002
\uff084\uff09\u70b9\u51fbPC\u7aef\u3002
\uff085\uff09\u9f20\u6807\u653e\u7f6e\u9996\u9875\u3002
\uff086\uff09\u70b9\u51fb\u88c5\u4fee\u9875\u9762\u3002
\uff087\uff09\u8fdb\u5165\u9875\u9762\u7f16\u8f91\u3002
\uff088\uff09\u9f20\u6807\u653e\u7f6e\u5bfc\u822a\u680f\u70b9\u51fb\u7f16\u8f91\u3002
\uff089\uff09\u8fdb\u5165\u5bfc\u822a\u8bbe\u7f6e\u3002
\uff0810\uff09\u70b9\u51fb\u663e\u793a\u8bbe\u7f6e\u3002
\uff0811\uff09\u8f93\u5165\u81ea\u5b9a\u4e49\u4ee3\u7801\u3002
\uff0811\uff09\u70b9\u51fb\u786e\u5b9a\u3002
\uff0812\uff09\u70b9\u51fb\u53d1\u5e03\u7ad9\u70b9\u5373\u53ef\u3002
可以。用CSS可以做到。但是CSS3在IE9以下的浏览器支持不好。我写个例子，先看效果(火狐下)：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="xxx/apple-touch-icon.png" rel="apple-touch-icon-precomposed" />
<title>CSS3 多边形</title>
</head>
<body>
<style type="text/css">
.pxsbx{ width: 100px; height: 60px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }
</style>
<div class="pxsbx"></div>
</body>
</html>
这个用背景图片最好，用像2楼那样的CSS3代码也可以，但是现在浏览器对于CSS3的代码支持不是太好，IE9以上的浏览器才认识CSS3代码。
这应该不是一斜线，而是一个图片，也就是背景图片（多半是个长方形），像这样的一个图片：
用这样一个图片做背景，其它的位置图片都弄成那个红色，看上去就是那个斜线的效果了。
说到这不知道你听明白没有。如果真要弄个斜线的话，那应该是不好实现的。
去河塘月色3学习这方2面的技术
绛旓細1锛氱櫥闄嗘窐瀹濆崠瀹朵腑蹇冿紝杩涘叆娣樺疂搴楅摵瑁呬慨鍚庡彴椤甸潰锛岄紶鏍囨斁鍦ㄥ鑸爮浣嶇疆锛屽嚭鐜扮紪杈戠獥鍙锛2锛氱偣鍑荤紪杈戯紝鎵惧埌鈥滄樉绀鸿缃濓紝鐐瑰嚮鍚庣湅鍒扮櫧妗嗗氨鏄疌SS鑷畾涔夋銆3:灏嗘垜浠笂闈㈡彁渚涚殑閫忔槑浠ｇ爜澶嶅埗杩涘幓锛屽鑸爮灏变細閫忔槑鏄剧ず浜 绠鍗曠殑娣樺疂鏂版椇閾鸿嚜瀹氫箟CSS瀵艰埅閫忔槑鑳屾櫙浠ｇ爜锛.skin-box-bd{background:none;} .menu-list...
绛旓細.popup-content .cats-tree .snd-pop-inner{background:#000000;} 榧犳爣婊戣繃涓夌骇鍒嗙被瀵艰埅鏂囧瓧鍙樻崲鑳屾櫙鑹浠ｇ爜濡備笅锛.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;} 鍦ㄤ笁绾у垎绫诲墠鍔犱笂灏忓潡鐧借壊浠ｇ爜濡備笅锛.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3...
绛旓細border:none;}.skin-box-bd .menu-list .menu .link .title{color:#000000;}.all-cats .link .title{color:#000000;}.all-cats .link .popup-icon{background:transparent;} 鎴戠櫨搴︾┖闂翠腑鏈変唬鐮佺敓鎴愬伐鍏凤紝鍏朵腑鏈変竴椤瑰氨鏄叧浜瀵艰埅鏍廋SS浠ｇ爜鐨勶紝鍙互鑷姪鐢熸垚浠ｇ爜锛屼綘鍙互鍘荤湅鐪嬨
绛旓細鍥犱负涓嶅悓鐨勬ā鏉垮瀵艰埅鏍鐨勮缃笉涓鏍凤紝鎵浠ワ紝鏈濂藉氨鏄牴鎹叿浣撶殑鎯呭喌閽堝鎬х殑缂栧啓CSS浠ｇ爜銆備笉杩囷紝浣犲彲浠ュ厛璇曡瘯浠ヤ笅鐨勪唬鐮侊紙灏嗕互涓嬩唬鐮佹斁鍏ュ鑸爮鐨勨滄樉绀鸿缃濅腑锛夛細.skin-box-bd{background:none;background:TRANSPARENT;border:none;} .skin-box-bd li{vertical-align:middle;} .skin-box-bd .p...
绛旓細1.瀵艰埅鑳屾櫙鑹浠ｇ爜锛堥櫎鍘烩滄墍鏈夊垎绫烩濓級濡備笅锛.menu-list .link{background:#000000;} 2.瀵艰埅鏍鏂囧瓧锛堥櫎鍘烩滄墍鏈夊垎绫烩濓級濡備笅锛.menu-list .menu .title{color:#棰滆壊浠ｇ爜;font-size:瀛楀彿px;} 3.鈥滄墍鏈夊垎绫烩濈殑鑳屾櫙鑹蹭唬鐮佸涓嬶細.all-cats .link{background:#000000;} 4.鈥滄墍鏈夊垎绫烩濈殑鏂囧瓧浠ｇ爜...
绛旓細娣樺疂搴楅摵瑁呬慨浠ｇ爜鏄竴绉嶅熀浜嶩TML鍜CSS鐨勪唬鐮侊紝瀹冨彲浠ョ敤鏉ユ敼鍙樻窐瀹濆簵閾虹殑澶栬鍜屽竷灞銆傞氳繃娣樺疂搴楅摵瑁呬慨浠ｇ爜锛屽崠瀹跺彲浠ヨ嚜瀹氫箟搴楅摵鐨勮儗鏅佸瓧浣撱瀵艰埅鏍銆佸晢鍝佸睍绀虹瓑绛夛紝浠庤岃搴楅摵鏇村姞涓у寲锛屾彁鍗囩敤鎴疯喘涔颁綋楠屻傚浣曚娇鐢ㄦ窐瀹濆簵閾鸿淇唬鐮 浣跨敤娣樺疂搴楅摵瑁呬慨浠ｇ爜闇瑕佷竴浜涘熀纭鐨凥TML鍜孋SS鐭ヨ瘑锛屼絾骞朵笉闇瑕侀潪甯告繁鍏ョ殑浜嗚В...
绛旓細}ul li:hover{ background:#933;}ul li:hover ul{ display:block;}ul li ul{ height:120px; display:none; position:absolute; top:40px; left:0;}ul li ul li{float:none; background:#444; height:40px;} 1 1.1 1.2 1.3 1 ...
绛旓細棣栧厛鏄css锛歛{ color: #000000} a:hover {color: #fff; background: #000; }鐒跺悗a鏍囩 鐐瑰嚮鎸夐挳杩欎簺鏄痑鏍囩鐨勪竴浜涙牱寮 a 鏍囩瀵规槸涓涓綉绔欑殑涓鏉′俊鎭摼鎺ュ畾涔夌殑锛宎:link {} /* 鏈闂殑閾炬帴 */a:visited {} /* 宸茶闂殑閾炬帴 */a:hover {} /* 褰撴湁榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂 */a...
绛旓細浠ｇ爜锛<!DOCTYPE html> CSS3 澶氳竟褰.pxsbx{ width: 100px; height: 60px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }
绛旓細鍙互,浣犲彲浠ユ壘鍒板搴旂殑浠ｈ〃閾炬帴鐨刟鍏冪礌 鍦css閲岃竟鍐欎緥:a鍏冪礌鐨刢lass绫绘槸nav.閭ｄ箞灏卞彲浠ヨ繖鏍峰啓.nav a:hover{background:#fff;}
