二、实例欣赏
假设有两个下划线图形diagonal.gif(波纹线)、flower.gif(花朵)前者的高、宽是3、9，后者的高、宽是11、15。下面是一个设置两种下划线的完整实例：
自定义链接下划线示例
网页源代码如下：注：diagonal.gif和flower.gif已经先拷贝到网页所在的同一目录下。
网页源代码如下：注：diagonal.gif和flower.gif已经先拷贝到网页所在的同一目录下。
〈html〉
〈head〉
〈title〉ex〈/title〉
〈style type=”text/css”〉
a#example1a {
text-decoration: none;
background: url(diagonal.gif) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 2px;
}
a#example1b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 2px;
}
a#example1b:hover {
background: url(diagonal.gif) repeat-x 100% 100%;
}
a#example2a {
text-decoration: none;
background: url(flower.gif) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px;
}
a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}
a#example2b:hover {
background: url(flower.gif) repeat-x 100% 100%;
}
–〉
〈/style〉
〈/head〉
〈body〉
〈p〉实例：〈/p〉
〈p〉 〈a href=”#” id=”example1a”〉波纹线静态下划线〈/a〉，
〈a href=”#” id=”example1b”〉鼠标停留时出现的波纹线〈/a〉。〈/p〉
〈p〉 〈a href=”#” id=”example2a”〉花朵静态下划线〈/a〉，
〈a href=”#” id=”example2b”〉鼠标停留时出现的花朵下划线〈/a〉。〈/p〉
〈/body〉
〈/html〉
