html网页设计中加横线,HTML：让网页超链接拥有多姿多彩的下划线(2)-网页设计,HTML/CSS...

二、实例欣赏

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