96编辑器旗下产品
找图
终身
ID:0
到期时间:永久
退出登录
您的位置:首页 > 百科管理 > 详情

基础版1920px全屏轮播海报代码-关于淘宝C店——店招、导航、海报(最好可以轮播)可以全屏的问题。

原创:找图网 2023-08-13 02:08:48
  • 淘宝首页全屏代码下如何插入轮播图片代码

  • 直接用全屏轮播代码。

    天猫店:

    <div class="MaGong"  style="height:0px;">

    <div class="sn-simple-logo" style="left:auto;right:auto;width:990px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">

    <div class="sn-simple-logo" style="left:-465px;top:0px;height:轮播图片高度px;width:1920px;border:none;padding:0;background:none; ">

    <div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">

    <div class="J_TWidget Mprev" data-widget-config="{'trigger':'.IX','align':{'node':'.IX','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

    <div class="Mprev" style="font-size:100px;cursor:pointer;"><img src="

    "></div>

    </div>

    <div class="J_TWidget Mnext" data-widget-config="{'trigger':'.IX','align':{'node':'.IX','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

    <div class="Mnext" style="font-size:100px;cursor:pointer;"><img src="

    "></div>

    </div>

    <div class="IX" style="height:轮播图片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">

    <ul class="macontent" style="height:轮播图片高度px;width:1920px;padding:0px;margin:0px;">

    <li class="item"><a target="_blank" href="图片1商品链接"><img src="图片1"></a></li><li class="item"><a target="_blank" href="图片2商品链接"><img src="图片2"></a></li>

    </ul>

    </div>

    <div class="sn-simple-logo" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">

    <div class="sn-simple-logo" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">

    <ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">

    <li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li>

    </ul>

    </div>

    <div class="sn-simple-logo" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">

    <ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">

    <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li></ul></div></div></div> </div></div></div>

    淘宝店专业版:

    <div class="MaGong"  style="height:0px;">

    <div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">

    <div class="footer-more footer-more-trigger" style="left:-485px;top:0px;height:轮播图片高度px;width:1920px;border:none;padding:0;background:none; ">

    <div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">

    <div class="J_TWidget Mprev" data-widget-config="{'trigger':'.WN','align':{'node':'.WN','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

    <div class="Mprev" style="font-size:100px;cursor:pointer;"><img src="

    "></div></div>

    <div class="J_TWidget Mnext" data-widget-config="{'trigger':'.WN','align':{'node':'.WN','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

    <div class="Mnext" style="font-size:100px;cursor:pointer;"><img src="

    "></div></div>

    <div class="WN" style="height:轮播图片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">

    <ul class="macontent" style="height:轮播图片高度px;width:1920px;padding:0px;margin:0px;">

    <li class="item"><a target="_blank" href="图片1商品链接"><img src="图片1"></a></li><li class="item"><a target="_blank" href="图片2商品链接"><img src="图片2"></a></li></ul></div>

    <div class="footer-more footer-more-trigger" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">

    <div class="footer-more footer-more-trigger" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">

    <ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">

    <li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li>

    </ul>

    </div>

    <div class="footer-more footer-more-trigger" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">

    <ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">

    <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li></ul></div></div></div></div></div></div>

    淘宝基础版:

    <div class="MaGong" data-title="来自淘宝代码生成网" data-time="1502845797" style="height:0px;">

    <div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; ">

    <div class="footer-more footer-more-trigger" style="left:-485px;top:0px;height:轮播图片高度px;width:1920px;border:none;padding:0;background:none; ">

    <div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget">

    <div class="J_TWidget Mprev" data-widget-config="{'trigger':'.UF','align':{'node':'.UF','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

    <div class="Mprev" style="font-size:100px;cursor:pointer;"><img src="

    "></div>

    </div>

    <div class="J_TWidget Mnext" data-widget-config="{'trigger':'.UF','align':{'node':'.UF','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

    <div class="Mnext" style="font-size:100px;cursor:pointer;"><img src="

    "></div>

    </div>

    <div class="UF" style="height:轮播图片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">

    <ul class="macontent" style="height:轮播图片高度px;width:1920px;padding:0px;margin:0px;">

    <li class="item"><a target="_blank" href="图片1商品链接"><img src="图片1"></a></li><li class="item"><a target="_blank" href="图片2商品链接"><img src="图片2"></a></li>

    </ul>

    </div>

    <div class="footer-more footer-more-trigger" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">

    <div class="footer-more footer-more-trigger" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">

    <ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">

    <li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li>

    </ul>

    </div>

    <div class="footer-more footer-more-trigger" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">

    <ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">

    <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li><li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●</li></ul></div></div></div> </div> </div></div>

  • 关于淘宝C店——店招、导航、海报(最好可以轮播)可以全屏的问题。

  • 首先,店招跟导航可以做在同一张图片里面,这个需要背景加中间图片重叠,才能达成全屏效果,

    其次,海报则简单多了,只需要代码就可以全屏,不用像店招那样切片,可以直接做成1920宽度的图片,不懂可以追问,这里附上淘宝C店海报单张不轮播全屏代码:

    <div data-title="ws72993解答" style="height:209px;">

    <div class="footer-more-trigger" style="left:50%;width:1920px;height:229px;right:auto;top:auto;padding:0;border:none;left:auto;z-index:1;">

    <div class="footer-more-trigger" style="left:-485px;top:auto;border:none;padding:0;">

    <img src="图片地址"/>

    </div>

    </div>

    </div>

    其中209是你的图片高度减去20的出来的。

  • 店铺首页海报怎么做?淘宝店铺全屏海报怎么制作,需要用其他软件做吗

  • 淘宝首页全屏海报图怎么设置

    1、打开记事本把这代码复制粘贴在内做准备,也可用直接店铺装修的自定内容区。为了更好的看效果这用记事本。

    <divstyle="height:600px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;">

    <divclass="footer-more-trigger"style="left:50%;top:auto;border:none;padding:0;">

    <divclass="footer-more-trigger"style="left:-960px;top:auto;border:none;padding:0;">

    <ahref="连接地址"target="_blank"style="width:1920px;height:600px;display:block;"><imgsrc="图片链接地址"style="border:none;"/></a>

    </div>

    </div>

    </div>

    2、现在修改代码链接地址,到卖家中心复制商品链接地址粘贴覆盖链接地址。再到空间复制海报链接地址覆盖图片链接地址,复制好待用,效果如图。

    3、进入店铺装修添加个自定义内容区。

    4、添加完成后点击编辑,在显示标题选择不显示。点击<>编辑源代码,将复制好的代码粘贴里面,点击确定完成。

    5、最后再介绍一下代码位置与修改。海宽用1920px。高度400到600像素不等。修改代码高要和海报图片一样。

    6、再看一下自定义内容区高度设置效果对比。

    7、一切设置好,预览没发现问题,就点击发布。

    淘宝店铺装修首页怎么设计?在装修之前,首先要看你的店铺属于哪个版本的,如果是基础版,可修改的内容与权限不大,店铺变化受到限制;专业版则能提供较大的自由装修空间;

    首先,要布局划分筹备工作,可以将首页划分为店招,海报,产品宝贝,页尾

    整个首页可分为主体部分和背景,主体部分的宽度根据店铺性质的不同而有着差异

    接下来是全屏店招制作,全屏海报制作,宝贝的切片和页尾的制作,基本就可以完成一个自定义的首页

    灵猫电商提醒你在装修的过程中一定要有足够的耐心,这样才能确保装修的质量淘宝店铺全屏海报怎么制作,需要用其他软件做吗?用PS软件制作,最简单的方法就是修改别人已经制作好的PSD源文件,把海报上面的字改成你自己的字就可以了给你一些好看的全屏海报图给你参考下

    最新文章 更多
    最新素材 更多
    公司介绍 网站地图 图片资讯
    Copyright © 2010-2022 山东找图网络科技有限公司  鲁ICP备18007836号-3  邮箱:15653358549@163.com