淘宝导航条CSS代码怎么用 淘宝店铺导航栏CSS代码
\u6dd8\u5b9d\u5bfc\u822aCSS\u4ee3\u7801\u8bbe\u7f6e\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;}
\u53ef\u4ee5\u3002\u7528CSS\u53ef\u4ee5\u505a\u5230\u3002\u4f46\u662fCSS3\u5728IE9\u4ee5\u4e0b\u7684\u6d4f\u89c8\u5668\u652f\u6301\u4e0d\u597d\u3002\u6211\u5199\u4e2a\u4f8b\u5b50\uff0c\u5148\u770b\u6548\u679c(\u706b\u72d0\u4e0b)\uff1a
\u4ee3\u7801\uff1a
CSS3 \u591a\u8fb9\u5f62.pxsbx{ width: 100px; height: 60px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }
去掉全部边框:
.all-cats .link{border:0px;}
.menu-list .menu{border:0px}
去掉箭头:
.all-cats .link .popup-icon{display:none;}
箭头是个图标不是颜色，
你可以用以下代码更改:
all-cats .link .popup-icon{background:url(图片连接);}
.skin-box-bd .menu-list{ background:none;}.all-cats{ background:none;max-width:auto;width:auto;_width:auto;}.skin-box-bd,.menu,.all-cats .link{background:none;border:none;}.skin-box-bd .menu-list .menu .title{color:#ab6842;cursor:pointer;font-weight:700;}.skin-box-bd .menu-list .menu{border:none;}.skin-box-bd .popup-content .cats-tree .fst-cat{ border:none; height:28px;}.all-cats .link{width:90px;padding:0 10px;background:none;border:none;color:#FFF;font-size:12px;font-weight:700;}.all-cats .link .title{margin-left:10px;color:#ab6842;font-weight:700;cursor:pointer}.all-cats .link .popup-icon{background:none;font-family:"宋体"; border:5px solid; border-color:#666 #FFF #FFF #FFF; margin-top:14px;font-size:0;width:0;height:0;}.menu-list{width:830px;}.menu-list .link{padding:0 15px;border:none;color:#FFF;font-size:12px; font-weight:normal;background:none;}.menu-list .link .popup-icon{background:none; display:block; float:right;font-family:"宋体"; border:4px solid; border-color:#666 #FFF #FFF #FFF; margin-top:14px;font-size:0;width:0;height:0;}.all-cats-hover .link,.menu-list .menu-hover .link{ }.all-cats-hover .link .title,.menu-list .menu-hover .link .title{color:#f60;}.menu-list .menu-selected .link{ background:none;}.menu-list .menu-selected .link .title{ background:none;color:#f60}.popup-content{ border:none; background:#f60;}.popup-content .cats-tree{margin:0;padding:0 0 10px 0; background:none;}.popup-content .cats-tree .has-children{ background:none;}.popup-content .cats-tree .fst-cat-hd{ height:28px; line-height:28px;border-bottom:none}.popup-content .cats-tree .fst-cat-icon{ display:none;}.popup-content .cats-tree .has-children .fst-cat-icon{background:none;font-family:"宋体"; border:3px solid; border-color:#f60 #f60 #f60 #FFF; margin:12px 12px 0 0;font-size:0;width:0;height:0; float:right; display:block}.skin-box-bd .popup-content .cats-tree .cat-hd-hover,.skin-box-bd .popup-content .cats-tree .cat-hd-hover .fst-cat-hd{ background:#ab6842; height:28px; line-height:28px}.skin-box-bd .popup-content .cats-tree .cat-hd-hover .fst-cat-icon{ border-color:#ab6842 #ab6842 #ab6842 #FFF; }.popup-content .cats-tree .fst-cat-name{ font-weight:normal; color:#FFF; text-indent:20px; padding:0; height:28px; line-height:28px; }.popup-content .cats-tree .snd-pop-inner{ background:#ab6842;}.popup-content .cats-tree .snd-cat-hd-hover{ background:none}.popup-content .cats-tree .snd-cat-hd a{ color:#FFF; font-weight:normal; font-size:12px;}.popup-content .cats-tree .snd-cat-hd a:hover{ text-decoration:underline}.menu-popup-cats{ padding:8px 0}.menu-popup-cats .sub-cat a{color:#FFF; font-weight:normal; font-size:12px; text-indent:15px;}.menu-popup-cats .sub-cat-hover{ color:#FFF; background:#ab6842}.skin-box-bd{ border-bottom:1px dashed #edb25f;}
复制到源代码编辑模式中
如果有空5到河塘月色4逛一逛学一学
绛旓細鍙互銆傜敤CSS鍙互鍋氬埌銆備絾鏄疌SS3鍦↖E9浠ヤ笅鐨勬祻瑙堝櫒鏀寔涓嶅ソ銆傛垜鍐欎釜渚嬪瓙锛屽厛鐪嬫晥鏋(鐏嫄涓)锛浠ｇ爜锛<!DOCTYPE html> CSS3 澶氳竟褰.pxsbx{ width: 100px; height: 60px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); backgroun...
绛旓細鑷凡涔熷彲浠ュ紕锛屼絾鏄笉鎳傜殑璇濇瘮杈冮夯鐑︼紒/* 娣樺疂搴楅摵瀵艰埅鏍廋SS浠ｇ爜涔嬪垎姝ヨ瑙ｇ涓閮ㄥ垎銆侀潤鎬佽儗鏅鑹 */ /* 1銆侀椤/搴楅摵鍔ㄦ/鍏跺畠瀵艰埅绫荤洰鐨勮儗鏅壊锛岃繖閲岃涓虹孩鑹 */ .skin-box-bd .menu-list .link{background:red;} /* 2銆佹墍鏈夊垎绫荤殑鑳屾櫙鑹诧紙鏈宸﹁竟鐨勶級锛屼竴鏍疯涓虹孩鑹 */ .all-cats ....
绛旓細娣樺疂鐨瀵艰埅棰滆壊娌℃湁鐩存帴鐨勬寜閽彲浠ヤ慨鏀癸紝鎵浠ュ緢澶氫汉涓嶆弧鎰忓師鏈殑棰滆壊锛屽張涓嶇煡濡備綍鏀广傚叾瀹炶繖閲屾槸瑕佺敤CSS浠ｇ爜鐨勶紝涓嬮潰灏辨潵鐪嬬湅銆傜涓锛屾墦寮骞剁櫥褰曞崈鐗涳紝鐐瑰嚮鈥滃父鐢ㄧ綉鍧鈥濃斺斺滃簵閾鸿淇濄傜浜岋紝榧犳爣鎸囧悜瀵艰埇澶勶紝鍙充晶鍑虹幇缂栬緫鎸夐挳锛岀偣鍑烩滅紪杈戔濈涓夛紝鐐瑰嚮鈥滄樉绀鸿缃濓紝杩欐椂浼氱湅鍒颁袱琛屼唬鐮侊紝鐪嬩笉鎳傦紵娌...
绛旓細class=鈥渢shop-pbsm-shop-nav-ch鈥濈劧鍚庝繚璇佽繖涓爣绛剧殑鐖跺厓绱犳槸id涓篶ontent锛岀劧鍚巆ontent鐨勭埗鍏冪礌涓簆age锛屼笉杩囪繖浜沬d搴旇鏄娣樺疂椤甸潰榛樿鐨勬湰鏉ュ氨鏈夌殑鍚
绛旓細url(../images/forumMenuBg.gif) right center no-repeat;} .d1 ul{ width:960px; height:28px;background:#383838;} .d1 a:hover{ display:block;background:url(../images/forumMenuBg.jpg) 0 0 repeat-x;} 杩欐槸鎴戜互鍓嶅啓鐨瀵艰埅浠ｇ爜锛屽浘鐗囧拰棰滆壊浣犺嚜宸辨敼涓嬶紝甯屾湜鑳藉甯埌浣狅紒
绛旓細.skin-box-bd{background:#FFFFFF;}.skin-box-bd .menu-list{background:#FFFFFF;}.skin-box-bd .menu-list .menu{background:#1D96D4;border:none;}.skin-box-bd .menu-list .menu .link{background:#FFFFFF;border:none;border-right:1px solid #FFFFFF;}.all-cats .link{background...
绛旓細.menu-list .menu-hover .link{background:#000000;} 榧犳爣婊戣繃浜岀骇鍒嗙被瀵艰埅鏂囧瓧鍙樻崲鑳屾櫙鑹浠ｇ爜濡備笅锛.popup-content .cats-tree .cat-hd-hover{background:#000000;} 浜岀骇鍒嗙被鑳屾櫙浠ｇ爜濡備笅锛.popup-content{background:#000000;} A.绠鍗曠殑娣樺疂鏂版椇閾鸿嚜瀹氫箟CSS瀵艰埅閫忔槑鑳屾櫙浠ｇ爜锛.skin-box-bd{back...
绛旓細Alpha(opacity=70);}鍏充簬瀵艰埅鏍棰滆壊鐨css浠ｇ爜锛屼綘鍙互鎼滅储鈥滄窐鍝ユ瘺寮熷姪鎵嬧濓紝閲岄潰鏈夊鑸爮棰滆壊鐨CSS浠ｇ爜鐢熸垚宸ュ叿銆備互涓婁唬鐮侀櫎浜嗘渶鍚庝竴鍙ュ叧浜庝笅鎷夎彍鍗曞崐閫忔槑鐨勬槸鎴戞墜鍔ㄦ坊鍔犱笂鍘荤殑锛屽叾浣欒缃鑹叉柟闈㈢殑浠ｇ爜閮芥槸宸ュ叿鐢熸垚鐨勶紝瀵逛簬瀵笴SS涓鎬庝箞浜嗚В鐨勬湅鍙嬶紝搴旇杩樻槸鎸烘湁甯姪鐨勩傚笇鏈涙垜鐨勫洖绛旇兘澶熷府鍒颁綘銆
绛旓細transparent;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浠ｇ爜鐨勶紝鍙互鑷姪鐢熸垚浠ｇ爜锛屼綘鍙互鍘荤湅鐪嬨
绛旓細.skin-box-bd,.skin-box-bd .popup-container,.skin-box-bd .menu-list{border:none; background:#000000; height:30px; line-height:30px;}.skin-box-bd .popup-container .popup-icon{display:none;}/*data-title="鏈浠ｇ爜鐢42zy.com鑷姩鐢熸垚"> */.skin-box-bd .menu-list{height:30px...
