CSS和XHTML经验:类目之间的竖线问题引发的讨论
日期:2007年9月18日 作者: 查看:[大字体 中字体 小字体]-
段正淳的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的网页我的大脑会自动屏蔽。
realazy
虽然用border很方便,但有一个缺点:border的高度跟着盒子的高度(在这里是行高)走,如果能忍受这样的高度带来的不美观,那我也没有什么话好说
等ie6淘汰之时,就可以放心用 :first-child了,相权衡的话,我觉得给第一项加上class="first"也不失为实用主义做法。
承志
从设计上来说,加这条竖线又是个“中文网页的无奈”之举。
英文字母本身是曲线占多,加竖线的分隔效果很好。而在中文的横平竖直之中,再加一条竖线,效果已经大打折扣。
所以realazy说的“不美观”,我觉得也有些巧合的实用,竖线比文字还高,在眼睛扫瞄文字时,不容易被误看成文字的一部分。当然,确实还是不美观。
一种美观又有效的分隔的效果设计,也许得等显示器分辨率再翻上几番才行吧:)
aoao
在每个a标签之间用””符号来填充。也不是没意义。。
只是选择使用li时它才是没意义。。。
使用overflow:hidden在IE6有个缺点就是:
你点一下overflow:hidden的对象后按鼠标中键(没有装过罗技鼠标驱动并改变按下中键的功能)时,那个不可爱的四角是不会出现的。。
hax
首先加“”并不是没有意义的做法。其次用margin-left的方法也不见得好。比方说也有border高度的问题。
我觉得有人跟风你也别得意。因为我觉得这个方法一点也不好。很简单的一个理由:这只是一个trick,只适合这特殊情况,假设你要换用“-”来分割呢?
作为插入分割符号来说,真正合理使用css的,我给一个例子:
li ~ li:before { content:’-'; margin:0.25em; }
- [1] [2] [3] [4] [5] 下一页
- CSS和XHTML经验:类目之间的竖线问题引发的讨论 相关文章:
- ·CSS和XHTML经验:类目之间的竖线问题引发的讨论
- CSS和XHTML经验:类目之间的竖线问题引发的讨论 相关软件
上一篇:妙用Boot文件管理系统启动菜单
- 特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作
- 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转
- 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源:http://www.hackhome.com
精品推荐
热点TOP10
- ·DIV+CSS布局入门实例教程
- ·创建一个纯CSS的水平导航条
- ·设计一个基于CSS的网页模板
- ·Javascript+CSS横向三级导航菜单
- ·站长推荐:53个CSS-不可或缺的技巧
- ·CSS文本:word-wrap
- ·网页设计基础:Div+CSS布局入门教程
- ·如何使用CSS来进行网页排版
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·CSS中的滑动门技术
- ·DIV CSS网页布局导航菜单源代码(17)
- ·使用CSS处理表格边框样式化
- ·DW MX 2004 CSS 属性详解
- ·CSS文本:text-overflow
- ·如何用CSS定义表格与模拟表格
- ·如何用css设置网页字体
- ·总结:用CSS进行网页样式设计攻略全集
- ·使用纯 CSS 设计3D按钮
- ·小技巧:div+css高度自适应
- ·深入了解CSS的继承性及其应用
特别推荐
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·CSS样式设计之CSS滤镜资料小结
- ·总结:用CSS进行网页样式设计攻略全集
- ·创建一个纯CSS的水平导航条
- ·如何用css设置网页字体
- ·CSS中的滑动门技术
- ·Javascript+CSS横向三级导航菜单
- ·CSS文本:word-wrap
- ·用CSS进行网页样式设计攻略全集
- ·用CSS实现的固定表头的HTML表格
- ·CSS属性列表
- ·如何使用CSS来进行网页排版
- ·使用纯 CSS 设计3D按钮
- ·纯CSS制作简洁的垂直导航
- ·网页设计基础:Div+CSS布局入门教程
- ·CSS 制作的三级菜单特效代码
- ·设计一个基于CSS的网页模板
- ·如何用CSS定义表格与模拟表格
- ·用CSS制作的美国国旗
- ·DW MX 2004 CSS 属性详解
