当前位置：首页 -> 网页设计 -> HTML/CSS -> 自定多姿多彩的网页链接下划线

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

时间： 2021-07-31 作者：daque

css本身不会直接提供转换html链接带下划线的功能，但只要我们使用一些技术，我们就可以使单调的web链接强调丰富多彩。

一，基本原则

首先，自定义html链接下划线的第一步是创建图形，在水平方向上反复将此图放在水平方向上，形成下划线效果。如果要在下划线后面显示web背景，则可以使用透明的.gif图形。第二，如果带下划线的图形的高度很大，则必须增加文本的高度，从而在一行文本的底部和下一行文本的顶部之间存在大的空间，例如p {线高：1.5;}。

第三，为了显示下划线定义，必须隐藏默认下划线，即{text-decoration：none;}。四，设置链接元素的下划线模式，以构建自定义的下划线。假设下划线图形是下划线的.gif，将下一个抄写员图形的css代码设置为{background-image：url（下划线.gif）;}。第五，我们必须让下划线图案反复出现在水平方向上，但不能在垂直方向上重复，否则它将隐藏在文本后面。代码必须仅在水平方向上重复代码：a {background-repeat：重复-x;}。第六，为了确保图形出现在链接文本下方（无论字体大小），将图形放在链接元素的底部，背景位置属性。也许是箭头等下划线图形还需要考虑图形的方向在水平方向上。假设您想将下划线图形放在右下角，css代码为：a {背景 - 位置：100％100％;}。第七，为了将空间留给链接文本下方的自定义图形，必须添加适当的空白。相对于链接文本的特定位置的下划线图形与文本的大小相关，但通常，底部空格可以等于下划线图形的高度，如有必要，调整。例如：一个{padding-bottom：4px;}。第八，由于下划线图案放置在链接元素的底部，必须保证链接未折叠（如果允许链接跨越多行，只有以下行的链接文本将具有自定义下划线下面。使用css的空白属性来防止链接文本折叠，即{白空间：nowrap;}。总之，为链接元素定义了css样式属性的完整示例，例如：a {text-decoration：none ;背景：url（下划线.gif）重复-x 100％100％;填充底部：4px;空白空间：现在：nowrap;

如果您想要仅在鼠标留下时显示自定义下划线，只要直接在链接元素上的css后台属性更改为：hover，例如：

a {text-decoration：无;填充 - - 塔：4px;白色空间：nowrap; }

答：悬停{背景：url（下划线.gif）重复-x 100％100％; }

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

相关推荐

推荐下载

热门阅览

最新排行