【研究淘宝,经验分享一】
2点了,刚才一朋友做了半年的一个项目终于上线了!呵呵,我们的乐潮下月也即将上线!
这2天在研究淘宝的网站,一是研究它的页面优化,二是学习它的切图技巧......
本人今天来给大家分享一下这2天的成果....... [由于网速目前较慢,今天暂不截图]
1.图片及css处理技巧
2.不规则钮背景可随宽度自适应
讲述:1.图片及css处理技巧
所要讲述的其实之前就有在QQ空间官方网站上注意过[老版本]
一次偶然的机会,我发现QQ空间官方网站把一些 背景图片 图标 等图片,集中起来做成一张图片.
淘宝也如此,当然我相信还有更多的网站都有这样做...
这样做我觉得有2大好处
第一:便于管理 [当你面对一堆零碎的图片的时候,可能命名规范也难找]
第二:缩小的图片的大小 [已此图为例,
,仅仅9.7kb,尤其对于访问量比较大的网站而言,这微不足道的几kb可缓解服务器压力 ]
废话不说了,先代码:
.th-c-m,
.th-b,
.
.
.
.
.tbc-list li,
.news-text-list li,
.more-services-link,
#YahooSearch
{ background:url(
http://assets.taobaocdn.com/img/chl/fp/header_bg.gif) no-repeat; }
大家可以先查看此图片,首先集体定义会使用到此图片的id或class...
然后再通过backgronud-position来控制需要显示出来的图片及位置...
例如:.qucik-menu li a { cursor:pointer; float:left; padding:0 0 0 8px; background-position:0 -832px; }
不过本人建议,不是太大的站点就不需要用到此方法了,原因也就是其优势...
讲述:2.不规则钮背景可随宽度自适应
继续分享.. 我们先看代码:
<ul>
<li><a href="#"><span>我要买</span></a></li>
<li><a href="#"><span>我要卖</a></span></li>
<li><a href="#"><span>我的淘宝</a></span></li>
...
</ul>
大家可先观察淘宝首页快捷通道的按钮,这些按钮有大有小...
按照常规思维,可能我们需要切几张,然后分别来定义背景.
但是实际上淘宝只切了一张背景图来实现 [即按不规则钮背景可随宽度自适应]... 开始我也没想明白怎么实现的...
不过老规矩,继续看代码,继续思考...
常理,<a></a>标签里根本就不需要加<span></span>标签,它加必定有它加的原因...
剖析:实际上淘宝这里 <a></a> 与 <span></span> 都定义的背景图片,并且是相同背景.让 <a></a>的背景从左至右显示, <span></span>的背景从右至左显示. 这样就实现 钮背景可随宽度自适应 了.. 不明白的可查看淘宝源码 嘎嘎,其实这个对我目前项目有帮助,可以减少嵌套!
有兴趣的朋友可以多多研究类似淘宝这样的站,优化做的好,代码自然也经验,css技巧也很经典!记得研究出啥经典的东西跟我分享一下哈!
/*====Design By Biser,2008.7.3====*/
[
本帖最后由 design_master 于 2008-7-3 17:09 编辑 ]
- Archiver - WAP - TOP
