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.seo-lv.com//zxzs/196.html