二、实例欣赏

　　假设有两个下划线图形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〉

文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!