一、基本原理
首先,自定义HTML链接下划线的第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景,可以使用透明的.gif图形。
其次,如果下划线图形的高度较大,则必须适当增加文本的高度,使得一行文本的底部与下一行文本的顶部之间有较大的空间,例如p { line-height: 1.5; }。
如果要让自定义下划线只在鼠标停留时出现,只要把原来直接设置在链接元素上的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已经先拷贝到网页所在的同一目录下。
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%;
}
-->
实例:
相关视频
相关阅读 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键的用法
查看所有0条评论>>