• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

淘宝段正淳的css笔记大全第1/4页

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

试想过总结出这几年来写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的网页我的大脑会自动屏蔽。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
推荐个Css的filter常用滤波器属性及语句大全发布时间:2022-02-05
下一篇:
CSS实现的一个图片放大展示的一种思路发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap