淘宝京东装修代码

淘宝：

 

淘宝自定义框的类： .footer-more-trigger {
	position: absolute; left:-12px; top:-5px;
	width: 37px; padding: 6px 11px 4px 14px;
	line-height: 1.3;
	border: 1px solid #fff;
	}

全屏海报（要计算图片宽度）：

<div style="height:547px;">       <!--用来保留原来的位置，如果不加的话会脱离流媒体-->
<div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">    <!--先移到50%位置，用来更精确地定位图片-->
<div class="footer-more-trigger" style="left:-921px;top:auto;border:none;padding:0;">     <!--根据图片宽度，左移一半的像素宽度-->
<img border="0" height="547px" src="http://2www.yubaibai.com.cn/201305/21/bg1.jpg" width="1843px" /></div>
</div>
</div>

 

 

代码优化（不用计算图片宽度）：

 

<!--left用50%，这个50%是父级width的50%，如果没设就自动。。。。。之所以高width:auto;是因为淘宝footer-more-trriger设定了width:37px;********而什么第二个div要用position:relative;才起作用，而用position:absolute;就不起作用呢，因为第二个设置了absolute后，就脱离了其父级（即第一个div）的文档流，在父级中不占任何空间，所以此时父级的宽度不会将其算在之内，而父级里又没有其它内容了，所以第一个div的宽度为0，不是图片的宽度;而用relative时，其空间在父级中会保留，第一个div宽度=图片宽度;-->
<div style="height:543px;">
<div class="footer-more-trigger" style="left:50%;padding:0;border:none;top:auto;width:auto;">
<div class="footer-more-trigger" style="padding:0;border:none;top:auto;left:-50%;position:relative;width:auto;">
<img data-pinit="registered" src="http://2www.yubaibai.com.cn/201305/21/bg1.jpg" style="float:none;margin:0px;" /></div>
</div>
</div>

 

 

 

 

轮转代码：

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'tanchudiv'}" data-widget-type="Tabs" style="height:450px;overflow:visible;">
<div class="tanchudiv" style="height:450px;">
<div class="footer-more-trigger" style="width:1440px;height:450px;top:auto;padding:0px;border:none;left:50%;">
<div class="footer-more-trigger" style="width:1440px;height:450px;padding:0px;border:none;left:-50%;top:auto;">
<div class="J_TWidget" data-widget-config="{'contentCls': 'taobao-kaidian-com','navCls': 'taobaokaidian-com','effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'prev','nextBtnCls':'next','autoplay': true,'viewSize':[1440],'circular': true,'activeTriggerCls': 'arrow-d'}" data-widget-type="Carousel">
<div class="J_TWidget" data-widget-config="{'trigger':'.kun1440','align':{'node':'.kun1440','offset':[-400,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="prev" style="font-size:100px;cursor:pointer;">
<img src="http://taobaokaidian.com/tool/ajax/quanpinglunbo/img/2.png" /></div>
</div>
<div class="J_TWidget" data-widget-config="{'trigger':'.kun1440','align':{'node':'.kun1440','offset':[400,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">
<div class="next" style="font-size:100px;cursor:pointer;">
<img src="http://taobaokaidian.com/tool/ajax/quanpinglunbo/img/1.png" /></div>
</div>
<div class="kun1440" style="height:450px;width:1440px;overflow:hidden;padding:0px;margin:0px;">
<ul class="taobao-kaidian-com" style="height:450px;width:1440px;padding:0px;margin:0px;">
<li style="width:1440px;height:450px;padding:0px;margin:0px;">
<a href="http://item.taobao.com/item.htm?id=24076100888&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;scene=taobao_shop" style="padding:0px;margin:0px;" target="_blank"><img border="0px" data-pinit="registered" height="450px" src="http://taobaokaidian.com/tool/ajax/quanpinglunbo/img/0.jpg" width="1440px" /></a></li>
<li style="width:1440px;height:450px;padding:0px;margin:0px;">
<a href="http://item.taobao.com/item.htm?id=24076100888&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;scene=taobao_shop" style="padding:0px;margin:0px;" target="_blank"><img border="0px" data-pinit="registered" height="450px" src="http://taobaokaidian.com/tool/ajax/quanpinglunbo/img/1.jpg" width="1440px" /></a></li>
<li style="width:1440px;height:450px;padding:0px;margin:0px;">
<a href="http://item.taobao.com/item.htm?id=24076100888&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;scene=taobao_shop" style="padding:0px;margin:0px;" target="_blank"><img border="0px" data-pinit="registered" height="450px" src="http://taobaokaidian.com/tool/ajax/quanpinglunbo/img/2.jpg" width="1440px" /></a></li>
</ul>
</div>
<div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
<div class="footer-more-trigger" style="width:1440px;height:45px;padding:0px;border:none;left:-720px;top:405px;">
<ul class="taobaokaidian-com" style="width:950px;height:45px;margin:0 auto;text-align:center;border:none;">
<li class="arrow-d" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;">
<img height="36px" src="http://taobaokaidian.com/tool/ajax/quanpinglunbo/img/0.jpg" width="115px" /></li>
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;">
<img height="36px" src="http://taobaokaidian.com/tool/ajax/quanpinglunbo/img/1.jpg" width="115px" /></li>
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:36px;">
<img height="36px" src="http://taobaokaidian.com/tool/ajax/quanpinglunbo/img/2.jpg" width="115px" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="ks-switchable-nav" style="display:none;">
</ul>
</div>

 

---

京东：

<div style="height:678px;">
     <div style="left:50%;top:auto;border:none;padding:0; position:absolute">
          <div style="left:-960px;top:auto;border:none;padding:0; position:absolute"> 
               <img border="0" height="678" src="http://img10.360buyimg.com/imgzone/g15/M02/09/13/rBEhWFIu6DsIAAAAAAH93JXndzgAADAiQMNrQAAAf30562.jpg" width="1920" alt="" />
          </div>
     </div>
</div>