近与几位电商设计师谈起,淘宝装修简便的方法,现在淘宝上普通流行的设计是全屏海报设计的模式,但对于一些不太懂代码的设计来说,装修只能把一和海报切成三块,左,中,右,把内容区与旁边两侧的内容区分开来,但这样做往往在装修的时候会出现一条红小的白线之类的问题,这就在考验设计师在切片时的相当留心了。 在小屏的电脑上看也会出现左右拉条的形状,这就要考虑到不同用户在浏览店铺时的便利了。
随着淘宝越来越多的功能,采用以下方法是简便,快速的,把切片跟装修的时间都缩短了,也不会出现白线以及浏览器左右拉条的问题,对于不太懂代码的设计也不是大问题,那小编下面就来讲解一下代码式装修方法:
<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店基础版如何装修全屏海报”的文章中,也有简单的提到代码式全屏装修的方法,不明白的亲,可以结合来看一下哦!