七七鱼直通车托管

小标 七七鱼:让网店有订单! 网站地图 百度

淘宝店铺装修代码精选合集

给大家总结了一些小卖家的使用店铺装修代码,很多小卖家们都没去了解过店铺装修后台的版本,其实大部分人也不知道,作为一钻级以下的店铺装修后台是默认免费的专业版,等我们到了一钻以后,会变成基础班的,如果想要用专业版要花50元一个月去买,所以在我们一开始,淘宝还是给了我们小卖家很多的扶持的。就看我们自己会不会去学着运用好。我们都看别人的首页全屏海报,全屏店招非常的大气,漂亮,但是自己又不知道如何去做,之前有人问我,我说用代码,他们总是说,我连ps都不熟,怎么看得懂代码呢,我今天给大家分享一下一些简单的代码,你们不需要都看懂,因为就连我这个学过网站设计的人,一些词我也不知道啥意思呢,其实很简单的,我会相信的给大家指出来

第一点:全屏海报(代码如下)

【<div style=”height:550px;”>

    <div class=”footer-more-trigger” style=”left:50%;top:auto;border:none;padding:0;”>
        <div class=”footer-more-trigger” style=”left:-960px;top:auto;border:none;padding:0;”>
      <a href=”图片链接” target=”_blank” style=”width:1920px;height:550px;display:block;”>
              <img src=”图片地址” border=”0″ alt=”全屏海报” /></a>
        </div>
    </div>
</div>】

前提我们把我们的海报做好之后,上传到我们自己的图片空间里面,然后可以复制海报图片的链接,放到上面代码把红色的图片链接替换掉,然后我们点击海报跳转的页面链接把下面红色的图片地址替换掉,接下来去装修后台,在店招下面部分添加一个自定义模块(相信这个应该都会吧),添加之后如下图:

看图片,最上面一排显示标题后面选中“不显示”,第二排选中那个两个小箭头的按钮,下面文本框里面,把我们改动之后的代码复制粘贴进去,然后点击确定,发布一下试试,就完成了,我们的全屏海报,其实没那么难的,亲!我放的例子图片的告诉你可以看到我红色标记的heighth:550px,这个我是图片用的1920*550的,作图的时候高度根据你们自己的需要去定,如果你用的600px的,就把代码中的550改为600就行了,看各自的需要

第二点:全屏轮播

有的人感觉全屏海报还不给力,想要全屏弄几张图片,让图片轮播,可以多展示几个宝贝,其实这个代码也不麻烦,代码如下:

【 <div class=”footer-more-trigger” style=”width:1920px;height:550px;padding:0px;border:none;left:-960px;”>
                <div data-widget-config=”{‘contentCls’: ‘taobaoux-com’,’navCls’: ‘bbs-taobaoux-com’,’effect’: ‘scrollx’,’easing’:
‘easeOutStrong’,’prevBtnCls’:’prev1920′,’nextBtnCls’:’next1920′,’autoplay’: true,’viewSize’:[1920],’circular’: true}” data-widget-type=”Carousel” class=”J_TWidget”>
                    <div class=”J_TWidget” data-widget-config=”{‘trigger’:’.ux1920′,’align’:{‘node’:’.ux1920′,’offset’:[-500,0],’points’:[‘cc’,’cc’]}}” data-widget-
type=”Popup” style=”display:none;”>
                    </div>
          <div class=”J_TWidget” data-widget-config=”{‘trigger’:’.ux1920′,’align’:{‘node’:’.ux1920′,’offset’:[500,0],’points’:[‘cc’,’cc’]}}” data-widget-type=”Popup”
style=”display:none;”>
                    </div>
                    <div style=”height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;” class=”ux1920″>
                        <ul class=”taobaoux-com” style=”height:550px;width:1920px;padding:0px;margin:0px;”>
                          <li style=”width:1920px;height:550px;padding:0px;margin:0px;”>
                            <a target=”_blank”  href=”图片一链接” style=”padding:0px;margin:0px;”>
                                <img src=”图片一地址” width=”1920px” height=”550px” border=”0px”></a></li>
                          <li style=”width:1920px;height:550px;padding:0px;margin:0px;”>
                            <a target=”_blank”  href=”图片二链接” style=”padding:0px;margin:0px;”>
                                <img src=”图片二地址” width=”1920px” height=”550px” border=”0px”></a></li>
                          <li style=”width:1920px;height:550px;padding:0px;margin:0px;”>
                            <a target=”_blank”  href=”图片三链接” style=”padding:0px;margin:0px;”>
                                <img src=”图片三地址” width=”1920px” height=”550px” border=”0px”></a></li>
                        </ul>
                    </div>
                    <div class=”footer-more-trigger” style=”padding:0px;border:none;left:50%;”>
                        <div class=”footer-more-trigger” style=”width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url() repeat;top:500px;”>
                            <ul class=”bbs-taobaoux-com” style=”width:950px;height:50px;margin:0 auto;text-align: center;”>
                                <li style=”display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;”>
                                    <img src=”图片一地址” width=”137px” height=”46px” border=”0px” style=”vertical-align:middle;margin:5px 0;” /></li>
                                <li style=”display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;”>
                                    <img src=”图片二地址” width=”137px” height=”46px” border=”0px” style=”vertical-align:middle;margin:5px 0;” /></li>
                                <li style=”display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;”>
                                    <img src=”图片三地址” width=”137px” height=”46px” border=”0px” style=”vertical-align:middle;margin:5px 0;” /></li>
                            </ul>
                        </div>
                    </div>
        </div>
          </div>
        </div>
  </div>
    <ul class=”ks-switchable-nav” style=”display:none;”></ul>
</div>】

做的时候一定小心哦,因为一个标点的错误,可能就没有效果的,小心仔细点。

不要看这个代码如此之多,方法与我们上面说的全屏海报的方法差不多的,首先高度我就不强调了,与第一点的一样,把hight后面的550改成自己的图片的高度就行,这个轮播,我用的三张海报的,把海报传到自己的图片空间,三张海报地址与海报对应的跳转链接分别按照顺序替换代码中的图片一地址、图片一链接,图片二地址、图片二链接,图片三地址、图片三链接,图片链接就是点击海报我们想要跳转的页面链接。这些完成之后保存代码,同样在店招导航下面添加自定义模块,与第一点讲的一样,把改好的代码复制粘贴进去,确定,发布,再看吧,成功了。来看看效果吧

第三点:固定背景

我们去一些大店看的时候,他们的背景不会随着我们的页面拉动而改变,两边有着我们不论怎么拉动页面都可以看到的一些促销文案,二维码图片等等,其实这个也不难,我们只需要做一张宽1920,高一般700左右的就可以图片,然后,两边均匀加上我们想要加的东西,例如:微淘,二维码,促销信息。这点就需要大家用一下ps了,我们加的具体位置呢,是保证我们页面中间950两边,不然会被中间的模块遮挡住。图片做好之后,依然是上传到图片空间,代码如下:

【body{background-image:url(图片地址);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}】

就这一句,简单吧,复制图片链接,替换这句代码中的图片地址,然后放在

编辑导航,显示设置下面的文本框,代码放进去,确定,然后发布一下试一试,就ok了。简单吧。试一试吧,亲。(图片中代码是我自己的,不要照抄哦)看下图效果哦

第四点:店招全屏效果

其实这个就不用代码了,想要达到全屏的效果,首先我们得把图片做成1920*150的,然后存为jpg格式的图片,然后我们把中间1920*120的店铺招牌裁剪下来,上传到图片空间,放进店招里面,如下图

点击保存,下一步

选择我们的配色,根据自己的喜欢,点击保存,左边点击背景设置:

页头背景,下面有个选择图片上传,就把我们保存在电脑上面的1920*150的图片上传(注意,保存图片的时候一定注意图片大小不能超过200kb),然后右边选项:页头下边距10像素,选择关闭,背景设置,选择不平铺,背景对其:选择居中,页头背景,不选择。

然后点击保存,点了保存之后,再点击发布哦。看一下效果哦

怎么样,可以吧。。。

千万不要浪费了我们专业版的优势哦。多多学习。

下面给大家看一下整体的效果吧。

再也不用羡慕别人高端大气上档次的首页了,so  easy!!!

这样就ok了,其实代码也不是河很难,不要又看见代码就头大,看不懂很正常,就看你用心看不。小伙伴们,去试一试吧!!!

 
 
 
返回首页