HTML：让网页超链接拥有多姿多彩的下划线(2)

答案：
　　二、实例欣赏 

　　假设有两个下划线图形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=>　　〈a href=>　　〈p〉 〈a href=>　　〈a href=>
　　〈/body〉
　　〈/html〉

上一个：从HTML语言到网上家园 序章
下一个：HTML：让网页超链接拥有多姿多彩的下划线(1)