时间: 2021-07-31 作者:daque
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>