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

　　css自己没有径直供给变幻html链接下划线的功效，但只有应用少许本领，咱们仍旧不妨让缺乏的网页链接下划线变得充分多彩。

　　一、基础道理

　　开始，自设置html链接下划线的第一步是创造一个图形，在程度目标反复安置这个图形即产生下划线功效。即使要表露出下划线背地的网页后台，不妨运用通明的.gif图形。　　其次，即使下划线图形的莫大较大，则必需符合减少文本的莫大，使得一条龙文本的底部与下一条龙文本的顶部之间有较大的空间，比方p { line-height: 1.5; }。自设置链接下划线示例

　　第三，为表露出自设置的下划线，必需湮没默许的下划线，即a { text-decoration: none; }。　　第四，为链接元素树立下划线图形，结构出自设置的下划线。假如下划线图形是underline.gif，则树立下划线图形的css代码为a { background-image: url(underline.gif); }。　　第六，咱们要让下划线图形在程度目标重复展示，但不许在笔直目标反复展示，要不它将被湮没到文本的背地。诉求下划线只在程度目标反复展示的代码为：a { background-repeat: repeat-x; }。　　第六，为保护图形出此刻链接笔墨的下方（尽管字体的巨细），用background-position属性将图形放在链接元素的底部。对于箭镞之类的下划线图形，大概还要商量图形在程度目标的对齐目标。假如要将下划线图形放在右下角，css代码为：a { background-position: 100% 100%; }。　　第七，为了在链接文本的下方给自设置图形留出空间，必需介入符合的空缺。下划线图形对立于链接笔墨的简直场所与笔墨的巨细相关，但普遍而言，不妨先让底部空缺即是下划线图形的莫大，需要时再作安排。比方：a { padding-bottom: 4px; }。　　第八，因为下划线图形放在链接元素的底部，必需保护链接不折行（如承诺链接超过多个行，则惟有底下一条龙的链接文本底下会有自设置的下划线）。用css的white-space属性不妨提防链接笔墨折行，即a { white-space: nowrap; }。　　综上所述，为链接元素设置css款式属性的完备例子如：　　a {　　　text-decoration: none; 　　　background: url(underline.gif) repeat-x 100% 100%;　　　padding-bottom: 4px;　　　white-space: nowrap;　　}

　　即使要让自设置下划线只在鼠标中断时展示，只有把从来径直树立在链接元素上的css background属性改到:hover ，比方：

　　a {　　　text-decoration: none;　　　padding-bottom: 4px;　　　white-space: nowrap;　　}

　　a:hover {　　　background: url(underline.gif) repeat-x 100% 100%;

　　}

　　二、范例观赏 　　假如有两个下划线图形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〉