超链接文字隐藏

㈠方法一:利用span元素

举例:在设置网页头部的logo时,点击图片会自动跳转到一个页面,这是利用了超链接加背景图片做到的

          但是,仔细观看就会发现没有超链接的文字部分,被隐藏了,这是如何做到的呢?

方法:我们可以采用在超链接中加入一个span元素,设置span的样式,display:none;进行隐藏。

代码如下:

<!--html代码部分-->
<header class="header">
   <div class="logo left">
                <h1>
                    <a href="">
                        <span>豆瓣</span>
                    </a>
                </h1>
    </div>
</header>

<!--css代码部分-->
 .header .logo a span{
     display:none;
 }

效果图:

㈡方法二:设置超链接的样式

⑴首先:把超链接的高度设置为0;

⑵接着:把内边距:padding-top设置为logo背景图片的高度(把文字挤下去了)

★解释:当我们审查元素时,会看到,超链接只有padding(内边距),同时因为背景图是覆盖边框的,在padding部分仍然可以看到背景,但是高度为0,也就是它的内容区域为0,这样一设置padding的值,文字就被挤下去了。

⑶最后:溢出隐藏,把挤下来的文字隐藏,设置:overflow:hidden

代码如下:

 .header .logo a{
     width: 154px;
     height: 0px;
     overflow: hidden;
     padding-top: 30px;
     display:block;
     background: url("img/logo_db.png") no-repeat ;
 }

效果图:

原文地址:https://www.cnblogs.com/shihaiying/p/12302096.html

时间: 2024-10-18 16:04:28

超链接文字隐藏的相关文章

如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

关于采用css样式将多余的文字隐藏,以及实现树形菜单

前不久根据项目需要,需要写个页面,在页面中需要动态的实现一个树形的菜单,经过问度娘,选择使用一个treeTable的js插件.http://zhanchaojiang.com/demo/demo/treeTable.html这是对该插件的介绍地址.在这个插件中有如下几个树形:theme:default或者是vsStyle,默认为default,差别应该在样式上,default是加减号,vsStyle是三角.expandLevel:默认展开的层数,默认值为1.也就是刷新该页面时树状图展开的层次.c

CSS多余文字隐藏

有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 用下面的css样式就可以实现: .hidden-text { overflow: hidden; text-overflow: ellipsis; } 三个属性一起使用,就可以实现上述的效果. overflow,默认值是visible,如果不设置hidden,就会把内容全部显示,查出容器的范围. text-overflow:有三个值, clip(修剪文本).ellips

自定义超链接文字提示效果

自定义超链接文字提示和自带的超链接提示相比具有响应时间更快,更加美观的优点~ 1 /* 超链接文字提示 */ 2 $(function(){ 3 var x = 10; 4 var y = 20; 5 $("a.tooltip").mouseover(function(e){ 6 this.myTitle = this.title; 7 this.title = ""; 8 var tooltip = "<div id='tooltip'>&q

Css--让溢出的文字隐藏

让溢出的文字隐藏 text-overflow:ellipaos;/*让最后一个显示部分遮掩部分的字消失,而变成三个点点的省略号*/ overflow:hidden; /*这个参数可以让超出部分隐藏起来,但是这个隐藏是一种按照宽度而来的直接隐藏*/ white-space:nowrap; /* 确保超出文字显示在一行里面*/ 总结:对一个元素我们要添加哪些参数才能让一段文字不换行的方法,并防止文字溢出. 具体如下 { width:XXpx; white-space:nowrap; overflow

letter-spacing+first-letter实现按钮文字隐藏

本文地址:http://www.zhangxinxu.com/wordpress/?p=3557 一.文不在长,有货则灵 图片式按钮的文字隐藏看来是大家都比较关注的一个问题(分享讨论.微博转发等可见一斑),text-indent负值为最常用方法,然问题有三: 较大的负值有性能问题,例如新浪/腾讯微博提交按钮的-9999em,大概12~16万像素的宽度,相对于100个显示器宽度,在低配Android pad上,尤其含动画效果的时候,会直接卡爆: FireFox浏览器下虚框.其实问题不大,overf

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停

换行、文字隐藏省略号问题

1.一行超出文字隐藏 overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-space: nowrap; /*强制不换行*/ 2.div显示两行文字,超出两行部分省略号显示 overflow: hidden; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline; display: -webkit-box; -webkit-line-

超链接文字随状态改变变色2016-0514

这个知识点,可能会觉得碎,但是后期会用到,并且频繁的在练习网页制作中应用 额外扩展:疑问是不是在学习PHP中的函数之后可以定义一个函数来包括它? 链接的style:{       a:link{                  color:blue;随意设定                  text-decorationg:none;(无下划线)根据要求                } 超链接被点前状态     a:visited {                  color:blue