•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

怎样让超链接笔墨隐蔽掉css代码【html5教程】,超链接文字隐藏掉,css代码

摘要: 本篇文章给人人带来的内容是关于怎样让超链接笔墨隐蔽掉css代码,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。让超链接内笔墨隐蔽掉css技能规划要领偶然divcss网页规...
本篇文章给人人带来的内容是关于怎样让超链接笔墨隐蔽掉css代码,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

让超链接内笔墨隐蔽掉css技能规划要领

偶然div css网页规划时,运用超链接a标签,但须要将笔墨隐蔽,但超链接又不失效的需求。比方图片或图标的超链接,把图片或图标作为背景图片,上面运用超链接a加笔墨,但又不想让笔墨显现,超链接存在的又能够点击,图片也能够瞥见这个时刻就是隐蔽超链接笔墨。

运用CSS属性单词:text-indent

text-indent引见:

文本内容缩进属性,罕见用于文段开首笔墨缩进两个笔墨,比方文章段落每段缩进两个汉字设置text-indent即可。

要隐蔽也是有text-indent来完成,比方设置text-indent:-999px或text-indent:-9999px让对象内笔墨往前缩进9999px到达隐蔽作用。

超链接存在笔墨隐蔽css规划案例以下:

1、案例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接存在笔墨隐蔽 在线演示</title>
<style>
.logo{ margin:0 auto;width:175px; height:51px;
background:url(phplogo.gif) no-repeat 0 0}
.logo a{ display:block; width:100%; height:100%; text-indent:-9999px}
</style>
</head>
<body>
<div class="logo"><a href="http://www.ki4.cn/">ki4网</a></div>
</body>
</html>

设置一个class=logo的盒子,设置thinkcss的网站logo为背景图片,设置宽度和高度。

起首”.logo”选择器内设置css宽度、css高度、logo图片作为背景;
再对class=logo对象内超链接a设置形成块(让超链接a宽高见效)、设置宽度和高度,同时设置 text-indent:-9999px隐蔽超链接内的笔墨。固然如许笔墨隐蔽了,但超链接和背景图片保留了。

以上就是对怎样让超链接笔墨隐蔽掉css代码的悉数引见,假如您想相识更多有关CSS3教程,请关注ki4网。

以上就是怎样让超链接笔墨隐蔽掉css代码的细致内容,更多请关注ki4网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号