350分享-基礎版淘寶店鋪實現店招全屏
發表日期:2015-06-08 09:41?? 文章編輯:350模板官網小編 ?? 瀏覽次數:
以前網店裝修網發過一個教程:新旺鋪教程怎么讓店招通欄全屏
但是僅限于淘寶新旺鋪專業版店鋪使用,很多使用基礎版的淘寶店主一直要求我們做一個能在基礎版的店鋪里實現店招全屏的教程。
經過辛苦的研究過程,終于實現了基礎版店招全屏功能。
下面就給大家詳細的介紹下吧:
需要使用導航CSS和店招自定義功能結合制作。
導航CSS代碼:
.skin-box-bd{background:url(http://img.tbzxiu.com/89/bj1.jpg);border:0px;}.skin-box-bd .menu-list .menu-selected .link .title{background:none;border:0px;}.skin-box-bd .menu-list .menu-selected .link{background:url(http://img.tbzxiu.com/89/bj2.gif);}.skin-box-bd .menu-list .menu .link:hover{background:url(http://img.tbzxiu.com/89/bj2.gif);}.menu-list{background:none;border:0px;}.link{background:none;border:0px;}.menu{background:none;border:0px;}.all-cats{background:none;border:0px;}.skin-box-bd .all-cats .title{color:#FFFFFF;}.menu-list .menu .title{color:#FFFFFF;font-weight:bold;font-family:"微軟雅黑";font-size:14px;}.all-cats .link .title{color:#FFFFFF;font-size:14px;font-weight:bold;font-family:"微軟雅黑";}.skin-box-bd .menu-list .menu .link .title:hover{color:#FFFF00;}.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:red;}body{background-repeat:no-repeat;background-image:url(http://img.tbzxiu.com/89/beijing.jpg);background-position:center 25px;}
上面的代碼不需要修改,如果您有一定的設計和代碼基礎,可以自己研究做二次修改,如果沒有設計代碼基礎就不用動。
導航CSS代碼如果您不會安裝可以查看新旺鋪專業版全屏固定背景制作教程里的導航CSS安裝方法。
特別說明:上面的導航CSS代碼安裝以后不能夠再使用固定背景CSS代碼,兩個代碼有沖突。
店招自定義代碼:
<table border="0" style="width:960px;"><tbody><tr><td width="300"> <br /></td><td>您的淘寶店鋪名字</td><td> <br /></td></tr><tr><td> <br /></td><td>您的淘寶店鋪介紹</td><td> <br /></td></tr></tbody></table>
上面的代碼需要對店鋪名字和店鋪介紹做下修改,在代碼里都已經用黑色中劃線標出。
店招自定義代碼安裝好了以后在淘寶自定義里修改即可。安裝方法:點擊店招”編輯“--選擇自定義店招--點擊”源碼“按鈕,把上面的代碼粘貼進去再做修改即可。
標簽: ? ?
如沒特殊注明,文章均為350模板官網原創,轉載請注明來自http://www.eesewex8.cn//zxzs/196.html