中原威科

淘宝C店首页自定义模块1920像素全屏代码

淘宝C店 淘宝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全屏代码

赞 (3)
分享到: +More |