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

巨蟹红尘风雨中

巨蟹红尘风雨中

2016-01-29 12:04

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

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

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

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

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

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

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

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

p { line-height: 1.5; }

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

[补充]

语法:

  line-height : normal | length

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

取值:

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

说明:

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

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

展开更多 50%)
分享

猜你喜欢

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

Html CSS布局 Div+CSS XHTML
利用CSS 链接下划线也玩自定义

CSS代码:自定义网页超链接下划线

Web开发
CSS代码:自定义网页超链接下划线

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

自定义网页超链接下划线的CSS代码

Web开发
自定义网页超链接下划线的CSS代码

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

Html CSS布局 Div+CSS XHTML
自定多姿多彩的网页链接下划线

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

解决WPS文字链接下划线问题

电脑入门
解决WPS文字链接下划线问题

使用CSS去除 去掉超链接的下划线方法

Web开发
使用CSS去除 去掉超链接的下划线方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

图形超链接类

图形超链接类

DHTML编写经得起考验的可移植代码

DHTML编写经得起考验的可移植代码
下拉加载更多内容 ↓