- 本栏最新文章
- Design_master：研究淘宝 经验分享一 07-27
- 提高CSS的网页渲染效率11个注意点 07-25
- Javascript如何应用到网页中 07-22
- CSS初学：如何修改Zblog中的CSS 07-22
- 动易2006版模板方案的导入、导出 07-18
- 动易网站风格模板管理 07-18
- 动易模板常用CSS修改操作技巧 07-18
- 动易2006版模板教程:版式模板管理 07-18
- 别开生面:纯CSS实现相册滑动浏览 07-17
- 动态加载外部CSS与JS文件 07-16
- 本栏推荐文章
- Photoshop教程：水灵灵的美女调出来 12-30
- AS3与后台交互 12-21
- AS3通俗教程---AS3自身loading制作 12-19
Design_master：研究淘宝 经验分享一
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(/uploadfile/appdesign/uploadfile/200807/20080727115821492.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====*/
