淘宝C店首页自定义模块1920像素全屏代码淘宝装修中原威科

无意中发现几个淘宝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全屏代码

相关推荐