当前位置:主页 > 澳门黄金城线上 >

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

发布时间:19-12-06 阅读:974

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

实例:

波纹线静态下划线,

鼠标停顿时呈现的波纹线。

花朵静态下划线,

鼠标停顿时呈现的花朵下划线。



上一篇:解决中文问题的几个常用的函数
下一篇:韩国瑜:不改革会被唾弃 当选优先用年轻人