您的位置:首页网页设计HTML/CSS  → 拒绝单调 让网页超链接拥有多姿多彩的下划线

拒绝单调 让网页超链接拥有多姿多彩的下划线

时间:2004/11/7 2:43:00来源:本站整理作者:蓝点我要评论(0)

  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已经先拷贝到网页所在的同一目录下。

  
  
  ex


  
  


  


  

实例:


  

波纹线静态下划线
  鼠标停留时出现的波纹线


  

花朵静态下划线
  鼠标停留时出现的花朵下划线



  
  


相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法