当前位置:编程问答 > html/css >

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="#" id="example1a"〉波纹线静态下划线〈/a〉,
  〈a href="#" id="example1b"〉鼠标停留时出现的波纹线〈/a〉。〈/p〉
  〈p〉 〈a href="#" id="example2a"〉花朵静态下划线〈/a〉,
  〈a href="#" id="example2b"〉鼠标停留时出现的花朵下划线〈/a〉。〈/p〉

  〈/body〉
  〈/html〉

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

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,