提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > 怎样让超链接笔墨隐蔽掉css代码【html5教程】,超链接文字隐藏掉,css代码

本篇文章给人人带来的内容是关于怎样让超链接笔墨隐蔽掉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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样让超链接笔墨隐蔽掉css代码【html5教程】,超链接文字隐藏掉,css代码"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线