CSS仿淘宝旧版首页的CSS列表布局效果

　　仿淘宝旧版首页的CSS布局效果，现在淘宝改版了，看不到这效果了，不过觉得还是挺有用的，做起来也并不复杂，主要是在背景图片的处理上，用CSS定义背景图片的使用区域，可以把众多用到的背景图片制作在一起，这样方便管理资源。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>仿淘宝的个性List列表 - 烈火学院 Liehuo.Net</title><br /> <style><br /> body{ margin:10px; padding:10px; font-size:12px; line-height:1.7; text-align:center;}<br /> #zishu{ width:780px; margin-left:auto; margin-right:auto;}<br /> .list{width:260px; height:155px; float:left;}<br /> .box{ float:left; width:225px;}<br /> .box2{ padding:0 5px 0 5px; text-align:left;}<br /> #r1{background-position: 0;}<br /> #r2{background-position: -19px;}<br /> #r3{background-position: -38px;}<br /> #r4{background-position: -57px;}<br /> #r5{background-position: -76px;}<br /> #r6{background-position: -95px;}<br /> #r7{background-position: -114px;}<br /> #r8{background-position: -133px;}<br /> #r9{background-position: -152px;}<br /> #t1{background-position: 0px 0px;}<br /> #t2{background-position: 0px -5px;}<br /> #t3{background-position: 0px -10px;}<br /> #t4{background-position: 0px -15px;}<br /> #t5{background-position: 0px -20px;}<br /> #t6{background-position: 0px -25px;}<br /> #t7{background-position: 0px -30px;}<br /> #t8{background-position: 0px -35px;}<br /> #t9{background-position: 0px -40px;}<br /> #y1{background-position: 0px 0px;}<br /> #y2{background-position: 0px -18px;}<br /> #y3{background-position: 0px -36px;}<br /> #y4{background-position: 0px -54px;}<br /> #y5{background-position: 0px -72px;}<br /> #y6{background-position: 0px -90px;}<br /> #y7{background-position: 0px -108px;}<br /> #y8{background-position: 0px -126px;}<br /> #y9{background-position: 0px -144px;}<br /> #u1{border-right: 1px solid #8A8FA0;border-left: 1px solid #8A8FA0;}<br /> #u2{border-right: 1px solid #DF4493;border-left: 1px solid #DF4493;}<br /> #u3{border-right: 1px solid #3B6DA5;border-left: 1px solid #3B6DA5;}<br /> #u4{border-right: 1px solid #AA86CE;border-left: 1px solid #AA86CE;}<br /> #u5{border-right: 1px solid #6EA314;border-left: 1px solid #6EA314;}<br /> #u6{border-right: 1px solid #C55936;border-left: 1px solid #C55936;}<br /> #u7{border-right: 1px solid #FAAD2D;border-left: 1px solid #FAAD2D;}<br /> #u8{border-right: 1px solid #86D500;border-left: 1px solid #86D500;}<br /> #u9{border-right: 1px solid #2F8A8E;border-left: 1px solid #2F8A8E;}<br /> .cd1{background-image:url(/uploads/allimg/1104/5038.gif);background-repeat:no-repeat;cursor:pointer;float:left; width:19px;height:142px;}<br /> .ce1{background-image:url(/uploads/allimg/1104/5046.gif);background-repeat:no-repeat;height:5px;overflow:hidden;}<br /> .cf1{background:#fafafa;border-top: 0;border-bottom: 0; height:119px;}<br /> .cg1{background-image:url(/uploads/allimg/1104/5056.gif);background-repeat:no-repeat;height:18px;overflow:hidden;}<br /> .l1{width:40px;height:20px;cursor:pointer; margin-left:180px;}<br /> </style><br /> </head><br /> <body><br /> <div id="zishu"><br /> <div class="list"><br /> <a href="#"><div id="r1" class="cd1"></div></a><br /> <div class="box"><br /> <div id="t1" class="ce1"></div><br /> <div id="u1" class="cf1"><br /> <div class="box2">这里是内容1</div><br /> </div><br /> <div id="y1" class="cg1"><br /> <a href="#"><div class="l1"></div></a><br /> </div><br /> </div><br /> </div><br /> <div class="list"><br /> <a href="#"><div id="r2" class="cd1"></div></a><br /> <div class="box"><br /> <div id="t2" class="ce1"></div><br /> <div id="u2" class="cf1"><br /> <div class="box2">这里是内容2</div><br /> </div><br /> <div id="y2" class="cg1"><br /> <a href="#"><div class="l1"></div></a><br /> </div><br /> </div><br /> </div><br /> <div class="list"><br /> <a href="#"><div id="r3" class="cd1"></div></a><br /> <div class="box"><br /> <div id="t3" class="ce1"></div><br /> <div id="u3" class="cf1"><br /> <div class="box2">这里是内容3</div><br /> </div><br /> <div id="y3" class="cg1"><br /> <a href="#"><div class="l1"></div></a><br /> </div><br /> </div><br /> </div><br /> <div class="list"><br /> <a href="#"><div id="r4" class="cd1"></div></a><br /> <div class="box"><br /> <div id="t4" class="ce1"></div><br /> <div id="u4" class="cf1"><br /> <div class="box2">这里是内容4</div><br /> </div><br /> <div id="y4" class="cg1"><br /> <a href="#"><div class="l1"></div></a><br /> </div><br /> </div><br /> </div><br /> <div class="list"><br /> <a href="#"><div id="r5" class="cd1"></div></a><br /> <div class="box"><br /> <div id="t5" class="ce1"></div><br /> <div id="u5" class="cf1"><br /> <div class="box2">这里是内容5</div><br /> </div><br /> <div id="y5" class="cg1"><br /> <a href="#"><div class="l1"></div></a><br /> </div><br /> </div><br /> </div><br /> <p>以上为测试代码，CSS和内容都没有优化，但思路应该是对的！子鼠</p><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

CSS仿淘宝旧版首页的CSS列表布局效果

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

CSS仿淘宝旧版首页的CSS列表布局效果

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀