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

网店装修轮播海报代码-淘宝首页海报怎么做?淘宝首页的全屏海报装修方法

原创:找图网 2023-08-02 03:49:51
  • 求解淘宝店铺全屏海报图片轮播css代码

  • <div class="J_TWidget mypoper" data-widget-config="{'effect': 'fade','circular': true ,'contentCls':'sj-t','navCls':'sj-n','autoplay':'true'}" data-widget-type="Tabs" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;height:600px;overflow:hidden;padding-top:0px;">

    <div class="sj-t">

    <div class="J_TWidget" data-widget-config="{'contentCls': 'sj-content','navCls': 'sj-n','triggerType': 'click','effect': 'fade','steps': 1,'autoplay': true,'circular': true ,'prevBtnCls':'prev','nextBtnCls':'next'}" data-widget-type="Carousel">

    <div class="pa2">

    <div class="J_TWidget" data-widget-config="{'trigger':'.sj-content', 'align':{'node':'.mypoper', 'offset':[0,0], 'points':['cl','cl'] } }" data-widget-type="Popup" style="width:950px;display:none;">

    <div class="ks-contentbox" style="padding-bottom:0px;margin:0px;padding-left:0px;width:950px;padding-right:0px;padding-top:0px;left:0px;">

    <div class="prev" style="float:left;margin-left:50px;">

    <img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>

    <div class="next" style="float:right;margin-right:50px;">

    <img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>

    </div>

    </div>

    <ul class="sj-content" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:600px;overflow:hidden;padding-top:0px;">

    <li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">

    <a target="_blank"><img data-ks-lazyload="

    图片地址" /></a></li>

    <li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">

    <a target="_blank"><img data-ks-lazyload="

    图片地址" /></a></li>

    </ul>

    </div>

    <div style="width:1920px;display:none;height:0px;overflow:hidden;">

    <ul class="sj-t" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:50px;padding-top:0px;">

    <li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:315px;padding-right:0px;background:black;float:left;height:600px;padding-top:0px;">

    </li>

    <li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:315px;padding-right:0px;background:#F8C;float:left;height:8600px;padding-top:0px;">

    </li>

    </ul>

    </div>

    <ul class="sj-n" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:none;height:1px;padding-top:0px;">

    单词解释: width:1440px 这个是图片宽度,亲们可以自己设置多少。

    height:600px 这个是图片高度,也是亲们自己设置。

    left:-250px 这个是水平位置,图片插入进去没居中的,亲们就慢慢增加或者减少数字,就可以调到居中的哈。有什么问题再密我。

  • 淘宝全屏的轮播代码是怎么做的?

  • <div class="skin-box-bd clear-fix">

    <span><DIV class=J_TWidget data-widget-type="Tabs"

    data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}">

    <DIV style="HEIGHT: 550px" class=piaofu>

    <DIV

    style="Z-INDEX: 0; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px; LEFT: -485px"

    class=J_TWidget data-widget-type="Carousel"

    data-widget-config="{

    'contentCls': 'slide-kun1362899830209content',

    'triggerCls': 'slide-kun1362899830209triggers',

    'navCls': 'slide-kun1362899830209triggers',

    'triggerType': 'mouse',

    'effect': 'scrollx',

    'prevBtnCls':'prev',

    'nextBtnCls':'next',

    'steps': 1,

    'autoplay': true,

    'viewSize':[1920],

    'circular': true

    }">

    <DIV style="DISPLAY: none" class=J_TWidget data-widget-type="Popup"

    data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}">

    <DIV style="WIDTH: 90px; FLOAT: left; HEIGHT: 90px" class=prev><IMG

    src="左点击"></DIV>

    <DIV style="WIDTH: 90px; HEIGHT: 90px; MARGIN-LEFT: 950px" class=next><IMG

    src="右点击"></DIV></DIV>

    <DIV

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; OVERFLOW: hidden; PADDING-TOP: 0px"

    class=first-trigger2>

    <UL

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"

    class=slide-kun1362899830209content>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    <LI

    style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A

    style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"

    href="链接网站地址" target=_blank><IMG border=0

    src="大图链接地址" width=1920

    height=570></A></LI>

    </UL></DIV>

    </DIV></DIV></DIV>

    </span>

    </div>

  • 淘宝首页海报怎么做?淘宝首页的全屏海报装修方法

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

    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制作淘宝主图的海报?

    (1)进入PS。

    (2)点击文件新建。

    (3)输入名称设置主图宽度高度等信息点击确定。

    (4)点击文件打开。

    (5)选择产品图片点击打开。

    (6)键盘按ctrl+A全选图片、按ctrl+C复制图片。

    (7)点击主图文件。

    (8)键盘按ctrl+V把产品图粘贴到新建的主图上。

    (9)点击左侧T文字工具或者其他工具。

    (10)点击主图。

    (11)使用ps工具DIY主图信息。

    (12)编辑完成点击文件。

    (13)点击存储为web和设备所用格式。

    (14)选择图片设置。

    (15)点击存储。

    (16)选择存储位置。

    (17)点击保存。

    (18)主图制作存储完成。

    淘宝首页的全屏海报装修方法装修方法步骤如下:

    1,进入装修后台的图片空间,将你选择要轮播的海报上传上去。

    2,打开之前在网上下载的那段轮播海报代码。

    选择编辑——替换,将原代码中的500全部替换为海报高度,然后将这段代码复制下来。

    3,进入店铺装修页面,在主屏的第一屏海报位置新建一个自定义页面,点击,切换到代码模式。

    4,将之前复制的那段代码黏贴上去。找到代码中的图片链接部分。

    5,再次进入图片空间,将大图海报的链接地址复制下来。替换到原来的代码的图片链接位置。

    6,代码都改完之后,按回到图片模式,这时候会发现什么图都看不到。不用担心,点击预览或者发布,就能看到全屏轮播海报效果啦。

    附上全屏轮播海报代码:

    <divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'piao1365065449925fu'}"data-widget-type="Tabs">

    <divclass="piao1365065449925fu"style="height:500px;">

    <divclass="J_TWidget"data-widget-config="{'contentCls':'slide-kun1365065449925content','triggerCls':'slide-kun1365065449925triggers','navCls':'slide-kun1365065449925triggers','triggerType':'mouse','effect':'scrollx','prevBtnCls':'prev','nextBtnCls':'next','steps':1,'autoplay':true,'viewSize':[1920],'circular':true}"data-widget-type="Carousel"style="margin:0px;padding:0px;left:-180px;top:0px;width:1920px;z-index:10;">

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

    <divclass="prev"style="width:90px;height:90px;float:left;">

    <imgdata-ks-lazyload="!!"/></div>

    <divclass="next"style="width:90px;height:90px;margin-left:950px;">

    <imgdata-ks-lazyload="!!"/></div>

    </div>

    <divclass="first1365065449925trigger"style="margin:0px;padding:0px;width:1920px;height:500px;overflow:hidden;">

    <ulclass="slide-kun1365065449925content"style="margin:0px;padding:0px;width:1920px;height:500px;">

    <listyle="margin:0px;padding:0px;width:1920px;height:500px;list-style-type:none;">

    <ahref="/?&&scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="!!"height="500"width="1920"/></a></li>

    <listyle="margin:0px;padding:0px;width:1920px;height:500px;list-style-type:none;">

    <ahref="/?&&scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="!!"height="500"width="1920"/></a></li>

    <listyle="margin:0px;padding:0px;width:1920px;height:500px;list-style-type:none;">

    <ahref="/?&&scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="!!"height="500"width="1920"/></a></li>

    <listyle="margin:0px;padding:0px;width:1920px;height:500px;list-style-type:none;">

    <ahref="/?&&scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="!!"height="500"width="1920"/></a></li>

    </ul>

    </div>

    <ulclass="slide-kun1365065449925triggers"style="margin:0px;padding:0px;display:none;">

    <li>

    </li>

    <li>

    </li>

    <li>

    </li>

    <li>

    </li>

    </ul>

    </div>

    </div>

    </div>

    找企业服务上猪八戒网交付有保障验收再付款

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