首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
Google
段正淳的css笔记 Ⅰ
来源:Taobao.com UI Team 作者:正淳 2007年10月25日 12:23 网友评论:1条 点击:

试想过总结出这几年来写css与xhtml的经验 ,汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高,真是有点力不从心了。于是转念一想,可以用笔记的形式展现,这样就不用担心写不出来了。

现在就来说个淘宝首页上的一个小技巧。

类目之间的横竖线

从很久很久以前开始,类目间的竖线无非都只有三种。

  1. 背景图
    在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
    缺点:最后一个还是要用class来隐藏掉背景。
  2. 符号
    在每个a标签之间用”|”符号来填充。
    缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。
  3. a标签右侧的boder。
    同背景图一样,只不过使用border-right来代替。缺点也同上。

看到这里,可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。
为什么之前都没有那么做的,寡人也不知道了。难道寡人是第一个发现这样的做法?
不管是谁先此之前利用了这样的方法实现类目间竖线。
不过在淘宝首页上线后不久就有同行的网站在首页改版中也用了这样的方法。
那个网站不看也罢。class实在是写的有点多。加载html会变得多得多。
反正一个首页需要加载1.17m的网页我的大脑会自动屏蔽。

首页 上一页 [1] [2] [3] [4] [5] 下一页 尾页
上一篇:网页中九种常见用途特效按钮的代码   下一篇:marquee也可以斜着滚动 网页的新颖效果
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】