无意中发现几个淘宝C店的店铺背景比较好看,但是装修的时候如果把背景切成宽1像素,高为页面高度的图片,然后设置横向平铺,背景就是纯色的;如果把背景切成1920像素,大小肯定超过200kb,传不上。所以对这个问题比较好奇,看了一下代码,发现实现这个效果很简单,只需要加三个层就行了。
第一层设置模块高度,首页效果图做出来是多少像素,就设置成多少像素;
第二层加个【class="footer-more-trigger"】,这个是淘宝系统样式,默认带上了【position:absolute】属性,也就是漂浮,再设置这个层的位置为【left:50%】。
第三个层跟第二个层一样,不过位置不是【left:50%】,而是【left:-960】。
然后图片切片就可以了,可以添加单张图片,也可以添加table表格,或者ul。
根据需要随意添加,代码如下:
<div style="height:600px;">
<div style="left:50%;top:auto;border:none;padding:0;" class="footer-more-trigger">
<div style="left:-960px;top:auto;border:none;padding:0;" class="footer-more-trigger">
<ul>
<li style="width:1920px;">
<a href="http://yp123.uz.taobao.com" style="float: left;"/>
<img src="图片链接">
</a>
<a href="http://yp123.uz.taobao.com" style="float: left;"/>
<img src="图片链接">
</a>
<a href="http://yp123.uz.taobao.com" style="float: left;"/>
<img src="图片链接" />
</a>
</li>
</ul>
</div>
</div>
</div>
这里我设置模块高度为600像素,宽度为1920像素,用的是ul列表,每行3张图片。去掉链接的话需要给【img】标签加上【float:left;】属性,否则图片之间会有空隙。代码如下:
<div style="height:600px;">
<div style="left:50%;top:auto;border:none;padding:0;" class="footer-more-trigger">
<div style="left:-960px;top:auto;border:none;padding:0;" class="footer-more-trigger">
<ul>
<li style="width:1920px;">
<img style="float" src="图片链接" />
<img style="float" src="图片链接" />
<img style="float" src="图片链接" />
</li>
</ul>
</div>
</div>
</div>
天猫全屏代码请参考天猫首页店铺装修整页1920全屏代码