这个“竖线”应该是什么？
发表时间: March 17, 2009 分类: WebBuild 4条评论
先看几个图吧：
提问：这些“竖线”分隔符是什么——在HTML里怎么表现？
- 仅仅在HTML里面插入一个竖线：|；
- 将竖线放在一个<span>标签里面；
- 作为背景图片插入（作为该导航连接的标签背景或者添加一个如<span>标签设置其背景）；
- 作为列表（如果导航连接是放在一个列表标签里）的list-style样式属性；
- 作为border样式表现；
- others......
绝大部分网站将这个竖线表现为1或者2的形式，有些网站将这个用在了背景图（如淘宝），yahoo是用border样式表现的。到底用那种表现方式更好呢？
首先我们得弄清楚一件事：（从语义上来说）这个竖线到底是什么？
我个人的理解这是一个分割符（废话！），应该用border样式比较科学。打个比方：就像两个相邻的房间，中间分割的是墙。那么作为盒模型，border应该是最类似这个“墙”的。
只是，如果这个分割符不是一个“竖线”呢？像淘宝栏目导航和腾讯首页顶部的导航。我觉得这个分割（视觉表现形式）从HTML语义上来说没有明显的意义，在现阶段作为list-style表现可能比较好（不要说你的导航不是包含在列表里的）。
之所以说“现阶段”，是因为幸运的是CSS3已经支持将图片作为border（感谢腾讯文王同学提供参考文章地址），当然不幸的是还只有Safari和Firefox 3.1 (Alpha)支持这个属性，等到其他浏览器的支持估计不知道得等到什么时候。
上述观点欢迎大家发表不同意见。
已有 4 条评论
#1 阿肆 Says:
March 17th, 2009 at 05:31 pm
看样子我的风格得修改了，页面上也布满了方式1和方式2的竖线。有时间自己打翻重来一个。
#2 姬良 Says:
March 18th, 2009 at 01:19 pm
|||||||||就是这个了··
#3 smallen Says:
March 23rd, 2009 at 09:37 am
个人认为,如果是li形式,竖线就用css表现,如果是a形式,竖线写在html里更适合.
#4 kaman Says:
April 24th, 2009 at 03:37 pm
border好点儿 html5 不知道有啥改进
添加新评论