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

2016-01-29 12:04 6 1 收藏

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

【 tulaoshi.com - Html 】

  由 A List Apart 杂志及作者授权翻译。(Translated with the permission of A List Apart Magazineand the author[s].)

  说明:文章中“[补充]”内容系译者所补充添加(来自 CSS 2.0 中文手册),目的是方便读者理解相关内容。

  虽然网页设计师通常有大量的方法控制文档如何呈现,但是基本的CSS不能为页面中链接下方的下划线样式提供很多选择。不过只需一点小技巧,你就能获得链接样式显示方式的创作控制。

  自定义下划线给一些合适的网站以新的创作机会。自定义下划线还能够被用于为包含在同一个页面中的不同链接提供额外的视觉线索。

开始

  你应该从为你下划线创建图形开始。该图将会水平的重复,而如果你希望(网页)背景能够完全显示的话,你需要创建一个透明的.gif文件。

  如果你的下划线图形有几像素高,那么你应该增加的文本的line-height(行距),以增加上一行底部与下一行顶部的之间的空间。

p { line-height: 1.5; }

-------------------------------------------------

[补充]

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

语法:

  line-height : normal | length

取值:

  normal : 默认值。默认行高
  length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。请参阅 长度单位

说明:

  检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
  行高是字体下延与字体内部高度的顶端之间的距离。为负值的行高可用来实现阴影效果。
  假如一个格式化的行包括不止一个对象,则最大行高会被应用。在这种情况下,此属性不可以为负值。
  此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
  对应的脚本特性为 lineHeight 。

本新闻共4页,当前在第1页  1  2  3  4  

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

来源:http://www.tulaoshi.com/n/20160129/1484448.html

延伸阅读
标签: Web开发
以下是引用片段: style type="text/css" a{ color:#333333; text-decoration:none;} a:visited {color:#333333; text-decoration:none;} a:hover { color:#FF0000; text-decoration:underline;} a span { color:#333333;} /style a href="#"span111/span/a style type="text/css"a{ color:#333333; text-decor...
  方法一:打开word软件,连续输入图中的符号然后回车就能得到各种下划线。(如:***回车)。     方法二: (1)如果是需要制作考卷类的,那么就要先将输入法切换到英文输入法。   (2)然后按键盘中的shift+ -...
标签: word
word下划线怎么打?   最近,有网友向图老师小编询问:word下划线怎么打?关于这个问题,图老师小编表示需要分情况来说明,比如说需要打的是很短的下划线还是一行下划线,还是一个下划线,根据这个思路,图老师小编就为大家整理了word打出下划线的多个方法,希望大家看完之后会知道word下划线怎么打! Tulaoshi.com word下划线怎么...
标签: windows系统
Windows8.1系统IE10浏览器如何去除超链接下划线   第一步、进入Win8.1系统后,您需要在Win8.1电脑的metro菜单中直接双击进入到IE浏览器程序之中,如果大家发现Win8.1电脑的metro界面中没有IE浏览器的话,则可以先返回到Win8.1电脑的传统桌面,然后双击进入到IE浏览器中。 第二步、在打开的IE浏览器界面中,您依次点击上方的设置-...
标签: 电脑入门
下划线是我们文档中经常使用的一种格式,可以起到突出提示部分内容的效果。但是默认的下划线与文字底边靠的非常近,当排版时行间距稍大一点,这种下划线效果就显的非常难看。经过研究摸索,找到了一种拉大下划线与文字底部距离的方法,现奉献给大家。 首先按照正常的方法给文字添加下划线。将文字选中,单击格式工具栏上的下划线按钮添加下划...

经验教程

171

收藏

43
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部