web标准网面设计基础

CSS技巧 

利用CSS，链接下划线也玩自定义

　因为下划线图形是定位于链接元素的底部，所以我们需要保证链接不能横跨多行（如果他们被允许跨越多行，那么只有最低的一行链接文本显示自定义下划线）。我们将使用CSS的white-space属性禁止链接文本换行。

a { white-space: nowrap; }

-------------------------------------------------

[补充]

语法：

　　white-space : normal | pre | nowrap

取值：

　　normal  : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
　　pre  : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
　　nowrap  : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

说明：

　　设置或检索对象内空格字符的处理方式。
　　空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体   来添加空格，用 br 元素来添加换行。
　　此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
　　此属性作用于块对象。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 whiteSpace 。

-------------------------------------------------

　　链接元素的所有CSS属性可以合并为：

a {
    text-decoration: none;
    background: url(underline.gif) repeat-x 100% 100%;
    padding-bottom: 4px;
    white-space: nowrap;
}

　　如果你想自定义下划线的效果只在鼠标滑过链接时出现，只需设置CSS背景属性为:hover伪类，取代直接设置于链接元素上的样式即可。

a {
    text-decoration: none;
    padding-bottom: 4px;
    white-space: nowrap;
}

a:hover {
    background: url(underline.gif) repeat-x 100% 100%;
}

示例