天猫商城应用自定义类代码

来源:互联网 发布:二叉树层次遍历java 编辑:程序博客网 时间:2024/04/28 13:01

宽屏居中:

<div style="width:990px;height:模块高度px;"><div class="sn-simple-logo" style="width:1920px;left:-465px;"> 1920全屏代码,可以放工具生成的代码,也可以放DW做的自定义代码</div></div>

<div style="height:auto;">  <div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;">    <div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;"><img src="图片地址" width="1920" height="xxxx" border="0" />    </div>  </div></div>

京东宽屏居中:

<div style="width: 100%; overflow: hidden;" class="shop_topbanner">        <div style="width: 1920px; height: auto">                <div style="position: absolute; width: 1920px; height: auto; margin-left: -960px;left:50%;">                        <img src="这里是你的图片" alt="" height="xxxx" width="1920" />                                        </div>        </div></div>




一侧悬浮:

<div class="J_TWidget" data-widget-config="{'duration':0.1,'activeTriggerCls':'\u00A0tm-isv-flower-mask','interval':0.1,'effect':'scrollx','activeIndex':2,'navCls':'nav_zhicheng','contentCls':'content_zhicheng','autoplay':true}" data-widget-type="Carousel" style="position:relative;"><ul class="content_zhicheng" style="display: none; width: 999999px; left: 0px; position: absolute; "><li  style="width: 950px; height: 10px; display: block; float: left; "> </li></ul><ul class="nav_zhicheng"><div class="tm-mcBodyMask tapp89 mui-mbar tm-isv-flower-mask" data-tfxfwc="x,309,148px" style="visibility:visible;top:148px;left:auto;right:50%;margin-right:542px;opacity:1;z-index:99;width:109px;height:506px;background: url(http://img04.taobaocdn.com/imgextra/i4/1049562762/T2uvhPXYNaXXXXXXXX-1049562762.png) 50% 0% no-repeat scroll;"><div class="rel" style="width:109px;height:506px;overflow:hidden;"></div></div></div></ul></div>

倒计时:

a

<div class="rel" style="width:990px;height:92px;background:url(图片地址) top center no-repeat;"> <a class="jdb abs" href="http://ddshop.tmall.com/p/rd687149.htm?&&&&&&&&&&scene=taobao_shop" style="display:block;width:700px;height:81px;top:3px;left:318px;border-color:#000000;border-style:solid;border:none;background-image:url(http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif);z-index:99;float:left;" target="_blank" title=""></a>  <div class="jcdb abs J_TWidget" data-widget-config="{ "endTime": "2014-6-17 00:00:00", "interval": 1000, "timeRunCls": ".ks-countdown-run", "timeUnitCls":{ "d": ".ks-d", "h": ".ks-h", "m": ".ks-m", "s": ".ks-s" }, "minDigit": 2, "timeEndCls": ".ks-countdown-end" }" data-widget-type="Countdown" style="width:214px;height:28px;left:680px;z-index:99;float:right;margin:0px;padding:0px;margin-top:53px;margin-right:7px;"> <span class="ks-d" style="display:block;float:left;text-align:center;width:28px;margin-left:20px;color:#FFFFFF;font-family:arial;font-weight:700;font-size:18px;">00</span><span class="ks-h" style="display:block;float:left;text-align:center;width:28px;margin-left:20px;color:#FFFFFF;font-family:arial;font-weight:700;font-size:18px;">00</span><span class="ks-m" style="display:block;text-align:center;float:left;width:28px;margin-left:20px;color:#FFFFFF;font-family:arial;font-weight:700;font-size:18px;">00</span><span class="ks-s" style="display:block;text-align:center;float:left;width:28px;margin-left:20px;color:#FFFFFF;font-family:arial;font-weight:700;font-size:18px;">00</span> </div></div>
b

<div style="color:#00F; background-color:#CCC"><div class="J_TWidget" data-widget-type="Countdown"  data-widget-config="{     'endTime': '30000',     '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 value" style=" display:inline; color:#333; vertical-align:middle; line-height:1em;">0</span>天 <span class="ks-h value">0</span>小时 <span class="ks-m value">0</span>分    <!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 -->    <span class="ks-s value">00</span>秒 <span class="ks-i value"></span>毫秒 </div>  <div class="ks-countdown-run"></div>  <!-- 倒计时结束时显示-->  <!--可以写多个 -->  <div class="ks-countdown-end"> 倒计时结束了,干点什吧把什么隐藏起来,或者把什么显示出来 </div>  <div class="ks-countdown-end"> </div></div></div>
搜索框:

<div class="st" style="height:67px; background:url(http://img04.taobaocdn.com/imgextra/i4/1049562762/TB2F40eXpXXXXXQXFXXXXXXXXXX-1049562762.jpg) no-repeat;"><form action="http://ddshop.tmall.com/?search=y&scene=taobao_shop" method="post" name="SearchForm">  <div class="input" style="width:245px;float:left; margin-left:549px; margin-top:15px;">                    <input style="margin-top:2px; border:0px;width:310px;height:33px; font-size:16px; padding-left:5px; font-weight:bold;" value="奶粉" name="keyword" /></div><div class="submit l"><button style="width:70px;background:url(http://img02.taobaocdn.com/imgextra/i2/1049562762/TB2Q66OXXXXXXcrXFXXXXXXXXXX-1049562762.jpg) no-repeat;height:34px; border:0px;                    margin-left:60px; margin-top:17px;" title="搜索" type="submit" class="crumbSearch-btn J_TCrumbSearchBtn"></button></div></form></div>

去除自定义之间的10px

<div style="height:436px;width:990px;"><div class="sn-simple-logo" style="width:990px;height:446px;left:auto;top:auto;margin:0;padding:0;border:0;"><div class="sn-simple-logo" style="top:-10px;margin:0;padding:0;border:0;"> <img src="http:高度为446px的图片地址" /></div></div></div>

调用导航中css的方法:

<div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-pbsm-shop-nav-ch','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'nav_ddshop','contentCls':'con_ddshop','autoplay':true}"><div style="position:relative;"><ul class="con_ddshop" style="display:none;position:absolute;width:999999px;left:0;"><li style="width:1920px;height:auto;display:block;float:left;"></li></ul></div><div style="width:1920px;height:auto;"><ul class="nav_ddshop"><li class="tshop-pbsm-shop-nav-ch"></li></ul></div></div>

css3过渡效果:

.transition{transition:all 2s;-moz-transition:all 2s;-webkit-transition:all 2s;-o-transition:all 2s;}





0 0
原创粉丝点击