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

宽屏居中:

<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;}





阅读更多
换一批

没有更多推荐了,返回首页