段正淳的css笔记(1)分类之间的横竖线
作者：正淳 来源：ued.taobao.com 发布时间：2007-11-01 21:47:00
标签：css,淘宝,boder
段正淳的css笔记（1）分类之间的横竖线：
试想过总结出这几年来写css与xhtml的经验 ，汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高，真是有点力不从心了。于是转念一想，可以用笔记的形式展现，这样就不用担心写不出来了。
现在就来说个淘宝首页上的一个小技巧。
1、类目之间的横竖线
从很久很久以前开始，类目间的竖线无非都只有三种。
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的网页我的大脑会自动屏蔽。
好了，希望这篇文章是个好的开始。
继续阅读：段正淳的css笔记(2)圆角的做法
0
投稿猜你喜欢
- 今天有个朋友做网页的时候遇到个问题：想保留链接的背景，但又要链接里的文字消失！可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇
- 尽管甲骨文收购Sun交易尚在等待最终结果，业界对开源数据库MySQL的未来命运也十分担忧，但Sun的开发者依然在继续努力研发该开源数据库。他
- 本文列出了一些asp编程种可能会用到的正则表达式例子，大家可以方便的调用！如果您对asp种的正则表达式不是很了解可以看看这篇文章《ASP中R
- 很简单的教程，献给喜欢SEO的朋友们。把article.asp?logID=26 替换成article.asp?/a
- 触发器权限和所有权CREATE TRIGGER 权限默认授予定义触发器的表所有者、sysadmin 固定服务器角色成员以及 db_owner
第一种方法： 代码如下:Minimsdn.com为您提供的代码: -- Turn ON [Display IO Info when exec- 前一段时间有发过一个简单的JMAIL邮件发邮件的代码，今天就把这个代码做一个具体的注解，并增加了另外两个格式的代码，并举几个简单
- 你一定想下载一下感兴趣的网页，以便慢慢欣赏吧！利用FrontPage能够轻松做到这一点，甚至可以下载整个站点，当然这里只能下载静态的页面。启
- 计是一个输入-输出的过程，因为首先有用户的需求，客户的项目才有设计的产生，设计是带有目的性和市场行为的，当然也有一部分的创造性设计，仅仅为了
- 本文说明向外扩展数据库系统的两个选项，从而实现更高的可扩展性：水平数据划分和垂直数据划分当我提到向外扩展数据库系统时，我实际上只是讨论对数据
- 最近关于浏览器的最重要的事情就是IE的极光0day漏洞了，这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击，当然也有很多网站被黑
- 这个格式是我自创的，经常有人问我为什么，这里做个简单总结：1、分类，一个模块或者同类功能定义为一类定义，每类定义之间用段落隔开。2、分级，每
- 这几天在QQ群里知道了几个比较好的优化方面的站，感觉看高手的文章简直就是一种享受。和很多现在正在阅读这篇文章的站长一样，我即将毕业，但是还没
- 公司客户在使用网站后台编辑添加修改内容时，经常是直接从word文档里复制内容到编辑器里后就提交。结果是在内容显示页面上是五花八门的样式，有时
- 一般我们能过VS2005的SQL explorer来添加一个本地的MDF文件。也许你可能会出现下面这个问题：Exception Detail
- 在本机运行含有JavaScript代码的网页时（比如Google AD代码），IE浏览器会产生一个警告。这个“警告”确实很烦人，开始时还会误
- 这十则CSS技巧汇编于网络，作为老手已经司空见惯了，也没有什么新意，但温故而知新，或许阅读一遍也有一定的启发，本文主要面对CSS新手朋友，有
- 原型：EventManager是一个重要的原型，它用来赋予对象自定义事件的能力当对象类型的原型继承EventManager时，对象具有定义、
- Dethe Elza (delza@livingcode.org), 高级技术架构师, Blast Radius &n
- 这是来自于Steven D编写的WEB前端开发设计要点的内容。虽然许多设计师已非常熟练的使用了Web标准，让人遗憾的是有很多细节的排版处理仍
