天猫装修实用代码,全屏代码,全屏轮播,倒计时,京东装修
淘宝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>
京东代码
京东品牌街全屏代码
<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>
浙公网安备 33010602011771号