淘宝/天猫网店装修的两种方法

近与几位电商设计师谈起，淘宝装修简便的方法，现在淘宝上普通流行的设计是全屏海报设计的模式，但对于一些不太懂代码的设计来说，装修只能把一和海报切成三块，左，中，右，把内容区与旁边两侧的内容区分开来，但这样做往往在装修的时候会出现一条红小的白线之类的问题，这就在考验设计师在切片时的相当留心了。 在小屏的电脑上看也会出现左右拉条的形状，这就要考虑到不同用户在浏览店铺时的便利了。
随着淘宝越来越多的功能，采用以下方法是简便，快速的，把切片跟装修的时间都缩短了，也不会出现白线以及浏览器左右拉条的问题，对于不太懂代码的设计也不是大问题，那小编下面就来讲解一下代码式装修方法：
<div class="taomeizhuli" style="height:800px;" data-title="" data-copyright="" data-time="160304150953">
<div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;top:auto;">
<div class="footer-more-trigger" style="left:-960px;border:none;padding:0;top:0px;">
<img src="//gdp.a***/imgextra/i4/746086424/TB2QVNzlXXXXXcZXXXXXXXXXXXX-746086424.jpg" width="1920" height="800" alt="" />
</div>
</div>
</div>
以上我们可以很清楚的看到，图片被三个DIV包裹着，外层的DIV的CLASS为taomeizhuli，这个CLASS无需定义，淘宝后台已经有定义的CSS存在，这样就便于很多用户装修，在taomeizhuli下定义一个简单的CSS，style="height:800px; 意思是:高度是800，外层的DIV所定义的高是整个包裹里图片的高度，图片的张数是不限制的。
第二个DIV的CALSS为footer-more-trigger，这个CLASS也无需定义，淘宝后台已经有定义的CSS存在，在footer-more-trigger下定义一个简单的CSS，style="left:50%;top:auto;border:none;padding:0;top:auto;意思是：左移动百分之五十，边框为零，边距为零，上边距为自动。
第三个DIV的CALSS跟第二个一样，这里的CLASS为什么跟第二个一样呢？
因为第二个DIV里有一个左移动百分之五十，在代码居中的逻辑里，这里就要减掉图片的总长的一半。可能很多人看不太明白，下面我例一个工式，应该就一目了然了
工式：
图长1920
第二个DIV左移:50%
第DG 个DIV再左移:1920*2=960
在上篇的“淘宝C店基础版如何装修全屏海报”的文章中，也有简单的提到代码式全屏装修的方法，不明白的亲，可以结合来看一下哦！