首页 网店学院 网店资讯 网店问答 专栏 店铺装修 拼多多入驻 虾皮入驻 推广返佣
甩手网 问答网店装修

全屏店招和全屏固定背景代码怎么样合到一起去?

全屏店招和全屏固定背景代码怎么样合到一起去?

这个具体是怎么弄的!

求教。

提问者:土豪金Ekjdn 1回答 浏览数:4628 悬赏积分:20 提问时间:2015-06-09 问题状态:未解决
我来帮他解答

1条回答

智多星吴用

智多星吴用 2015-06-09

具体可以参考内容:

1)全屏海报制作方法:

<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>

 

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

添加之后最上面一排显示标题后面选中“不显示”,第二排选中那个两个小箭头的按钮,下面文本框里面,把我们改动之后的代码复制粘贴进去,然后点击确定,发布一下就完成了。图片根据自己需要的图片比例去做好了。

2)全屏轮播制作方法:

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

      <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改成自己的图片的高度就行,这个轮播,我用的三张海报的,把海报传到自己的图片空间,三张海报地址与海报对应的跳转链接分别按照顺序替换代码中的图片一地址、图片一链接,图片二地址、图片二链接,图片三地址、图片三链接,图片链接就是点击海报我们想要跳转的页面链接。这些完成之后保存代码,同样在店招导航下面添加自定义模块,与第一点讲的一样,把改好的代码复制粘贴进去,确定,发布,再看吧,成功了。来看看效果吧

3)固定背景如何设置:

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

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

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

编辑导航,显示设置下面的文本框,代码放进去,确定,然后发布一下就好了。(图片中代码是我自己的,不要照抄)

4)全屏店招制作方法:

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

点击保存,下一步

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

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


评论(0) 支持0 反对0
关于甩手软件     |     关于我们     |     联系我们     |     服务条款     |     隐私协议     |     用户权限     |     站点地图     |     帮助中心

甩手客户服务

  • 甩手问答
  • 在线客服:企业QQ 800055007
  • 白班咨询电话(9:00-18:00):
    0755-26470437/26470392
    晚班咨询电话(18:00-22:00):
    18926581976/18926585976
  • 客服上班时间:
    周一至周五9:00--22:00,周末9:00--17:00
    (除法定节日以外,其他不在线时间请留言,
    我们看到后会第一时间回复您!)
  • 甩手网投诉电话:0755-26470437/26470392转621

关注公众号

Copyright ©2010-2020 深圳市华通易点信息技术有限公司 - 甩手网 All Rights Reserved.[粤ICP备12028137号]

粤公网安备 44030502000916号

关闭
在线客服
投诉建议