天猫装修实用代码,全屏代码,全屏轮播,倒计时,京东装修

淘宝Widget规范

淘宝Widget规范链接

导航CSS代码在线生成工具
轮播推荐模块在线生成工具
放大镜模块在线生成工具
带缩略图轮播模块在线生成工具
分隔模块在线生成工具
客服中心模块在线生成工具
搜索模块在线生成工具

天猫店铺1920全屏代码

<div style="height:3000px;width:1920px;" data-title="天猫店铺1920全屏代码">
  <div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;">
    <div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;">
      在此插入代码
    </div>
  </div>
</div>

淘宝店铺1920全屏代码

<div style="height:3000px;" data-title="淘宝店铺1920全屏代码">
  <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;">
        在此插入代码
    </div>
  </div>
</div>

走马灯

<marquee style="width:100%;height:100%;" data-title="走马灯" scrollamount="2" scrolldelay="1" direction="left" behavior="alternate">
    <img src="//gdp.alicdn.com/imgextra/i4/1807289316/TB2l1eicpXXXXXeXXXXXXXXXXXX_!!1807289316.jpg" width="1920" height="42" border="0" usemap="#Map">
</marquee>

悬停切换图片效果

<div class="sub all_t10" data-title="悬停切换图片效果" style="width:300px;height:300px; dashed #ccc;background:url(http://img03.taobaocdn.com/imgextra/i3/743545528/T2gttoXBpaXXXXXXXX_!!743545528.jpg_310x310.jpg);float:left;margin-right: 20px">
  <div data-widget-config="{'trigger':'.all_t10','align':{'node':'.all_t10','offset':[0,-300],'points':['bc','tc']}}" data-widget-type="Popup" class="J_TWidget hidden">
    <div style="width:298px;height:298px;background:url(http://img03.taobaocdn.com/imgextra/i3/743545528/T2QW8dXzlaXXXXXXXX_!!743545528.jpg_310x310.jpg)">
        <a href="#" style="display:block;width:298px;height:298px;" target="_blank"></a>
     </div>
  </div>
</div>

“sub all_t10”这个序列号需要修改一下,全部修改,一个图片切换一个对应的数字。否则切换的图片会混掉。
{'node':'.all_t10','offset':[0,-300],'points':['bc','tc']}}"这段里面的【0,-300】的300一定要修改。修改成你要切换图片高度。

淘宝C店全屏轮播

<div class="J_TWidget" data-title="淘宝C店全屏轮播" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:550px;overflow:hidden;">
  <div class="taobaoux" style="height:550px;">
    <div class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">
      <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 class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</div>
          </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 class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></div>
          </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="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920.jpg" width="1920px" height="550px" border="0px">
                </a>
              </li>
              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="1920px" height="550px" border="0px">
                </a>
              </li>
              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="1920px" height="550px" border="0px">
                </a>
              </li>
              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="1920px" height="550px" border="0px">
                </a>
              </li>
              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" 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(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:505px;">
              <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="http://demo.taobaoux.com/Carousel/1920/1920.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" />
                </li>
                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" />
                </li>
                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" />
                </li>
                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" />
                </li>
                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                  <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" 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>

倒计时原始代码

<div class="J_TWidget" data-title="倒计时原始代码" data-widget-type="Countdown"  data-widget-config="{'endTime': '20000','interval': 1000, 'timeRunCls': '.ks-countdown-run', 'timeUnitCls':{'d': '.ks-d','h': '.ks-h','m': '.ks-m','s': '.ks-s','i': '.ks-i'},'minDigit': 1,'timeEndCls': '.ks-countdown-end'}"> 
  <!-- 倒计时结束时隐藏--> 
  <!--可以写多个 -->
  <div class="ks-countdown-run">
      <span class="ks-d"></span>天 
    <span class="ks-h"></span>小时
    <span class="ks-m"></span>分 
    <!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 --> 
    <span class="ks-s"></span>秒
    <span class="ks-i"></span>毫秒
    </div>
  <div class="ks-countdown-run"></div>
  <!-- 倒计时结束时显示--> 
  <!--可以写多个 -->
  <div class="ks-countdown-end">
      倒计时结束了,干点什么吧把什么隐藏起来,或者把什么显示出来
  </div>
  <div class="ks-countdown-end"></div>
</div>

京东代码

京东SDK规范

京东品牌街全屏代码

<style>
.user_k_bj{width:990px; margin:0px auto}
.user_k_qp{width:1920px; margin-left:-582px; position:absolute}
.userdefined{ overflow:hidden; position:relative; width:auto}
</style>
<div class="user_k_bj" style="height:6328px">
  <div class="user_k_qp" style="height:6328px"> 切面代码粘贴到这里   height  对应文件的高度像素 </div>
</div>
<div class="user_k_bj" style="width:990px; margin:0px auto;height:328px;">
  <div class="user_k_qp" style="width:1920px; margin-left:-582px; position:absolute;height:328px"> 切面代码粘贴到这里   height  对应文件的高度像素 </div>
</div>
<div style="width:990px; margin:0px auto;height:700px;">
  <div style="width:1900px; margin-left:-750px; position:absolute;height:700px;"> 切面代码粘贴到这里   height  对应文件的高度像素 </div>
</div>

京东搜索代码

<div class="m-search for-black-bg">
  <form action="false" class="m-form" _lpchecked="1">
    <input type="text" class="m-kw" value="" maxlength="5" size="5">
    <input type="button" onclick="shop_signs_search(this)" value="搜索" class="m-submit">
  </form>
</div>

京东绝对定位代码

<div class="thickframe" style="left:auto; top:auto; bottom:1%; right:auto; width:148px; height:160px; opacity:100; background:none"> </div>

posted on 2019-07-20 09:43  shenenhua  阅读(3984)  评论(0)    收藏  举报

导航