CSS：自定多姿多彩的网页链接下划线

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

　　<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>

赞 (0)

相关推荐

  • CSS：自定多姿多彩的网页链接下划线

    CSS本身没有直接提供变换HTML链接下划线的功能,但只要运用一些技巧,我们还是可以让单调的网页链接下划线变得丰富多彩. 一.基本原理 首先,自定义HTML链接下划线的第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果.如果要显示出下划线背后的网页背景,可以使用透明的.gif图形. 其次,如果下划线图形的高度较大,则必须适当增加文本的高度,使得一行文本的底部与下一行文本的顶部之间有较大的空间,例如p { line-height: 1.5; }. 自定义链接下划线示例 第三,为显示出

  • 利用CSS，链接下划线也玩自定义

    原文链接:CSS Design: Custom Underlines 由 A List Apart 杂志及作者授权翻译.(Translated with the permission of A List Apart Magazine and the author[s].) 说明:文章中"[补充]"内容系译者所补充添加(来自 CSS 2.0 中文手册),目的是方便读者理解相关内容. 虽然网页设计师通常有大量的方法控制文档如何呈现,但是基本的CSS不能为页面中链接下方的下划线样式提供很多选

  • 用CSS实现链接的虚线下划线效果

    修改您的样式表,找下边这段(一般都在开头) a { color:#3399FF; font-weight:Normal; /*字体效果 普通 可以改成bold粗体*/ text-decoration:none; /*下划线效果:无下划线*/ } a:hover { color:#4499EE; text-decoration:none; /*下划线效果:无下划线*/ border-bottom: 1px #0099CC dotted /*加一个只有下边的框 边框为虚线*/ } a{}控制连接的效

  • ios App加载本地HTML网页,点击网页链接跳转到app页面的方法

    一.如何在APP里加载本地html文件内容: 首先准备一个html文件,比如内容如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <tit

  • IOS 开发之UILabel 或者 UIButton加下划线链接

    IOS 开发之UILabel 或者 UIButton加下划线链接

    IOS 开发之UILabel 或者 UIButton加下划线链接          本文主要介绍了IOS中 UILable及UIButton的带下划线链接的实现方法及附有源码下载,大家开发IOS 应用有需要的可以参考下: 方法一: NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"查看所有中奖记录"]; NSRange strRange = {0,[str lengt

  • JS+CSS实现自动切换的网页滑动门菜单效果代码

    JS+CSS实现自动切换的网页滑动门菜单效果代码

    本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code

  • JavaScript+CSS实现仿天猫侧边网页菜单效果

    JavaScript+CSS实现仿天猫侧边网页菜单效果

    本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st

  • 手机中点击网页链接实现拨号或保存电话功能实现代码

    手机中点击网页链接实现拨号或保存电话功能实现代码 通过网页拨打电话 复制代码 代码如下: <p><a href="wtai://wp/mc;135xxxxxxxx ">拨打电话</a></p> 注: 135xxxxxxxx是号码, 你可以换成你想拨打的号码. 通过网页存储电话号码 复制代码 代码如下: <p><a href="wtai://wp/ap;1860;中国移动">存储号码</a&

  • CSS小例子(只显示下划线的文本框，像文字一样的按钮)

    只显示下划线的文本框,像文字一样的按钮 body{ background-color:#daeeff; /* 页面背景色 */ } form{ margin:0px; padding:0px; font:14px; } input{ font:14px Arial; } .txt{ color:#005aa7; border-bottom:1px solid #005aa7; /* 下划线效果 */ border-top:0px; border-left:0px; border-right:0p

  • 关于超链接的下划线 使用说明

    关于超链接的下划线 使用说明

    关于超链接中的下划线这个及细节的问题,想必大家都有过讨论和思考,大家都知道,把握一个原则即可:"让使用者清楚的区分超链接文本和其他文本形式,并潜意识知道可以点击.":但对于是否可以潜意识知道可以点击,还是有争议的,不同的人,不同的环境会有不同的见解. 不妨分几个场景讨论一下: 1. 导航区域,潜意识我会去点击. 即便有下划线也是个"古老形式"的摆设,所以一般没有下划线:好的设计不仅满足点击,还满足视觉的层级关系. 2. 整页全是链接,下划线成了可有可无的表现. 象新

随机推荐