怎么隐藏与去掉"百度推荐"的链接

2014-03-12 00:01:07   来源:OKXUN.com

“百度推荐”是一款很好的个性化智能内容推荐系统,不过推荐工具会在被调用的页面底部加上工具名称,虽然合情合理,但是位置不恰当有时候会影响布局或UI设计效果,那么,我们就有需要去把底部工具的名称去掉或隐藏起来。

“百度推荐”与“无觅”、“友荐”、CNZZ的“云推荐”一样,被站长们广泛使用在大大小小的网站中。工具底部的名称链接显然标示着该工具的版权,想要去掉恐怕需要获得授权。但是我们可以在不去掉版权的情况下把“百度推荐”四个字隐藏起来,使得网页页面更加整齐有序,做到两全其美。

方法其实很简单,如果是资深码农肯定5秒钟就能解决了。我们可以将“推荐”代码放进一个DIV框架中,然后设置框架的大小,并且固定其大小。“百度推荐”四个字在工具调用出来的页面底部(其他推荐系统也一样),所以我们要将DIV框架的高度设置为固定高度。比如该工具高度是320px,其中底部“百度推荐”四个字与推荐内容最底部距离20px的高度,那么你把DIV框架的高度设置为300px就可以,刚好可以盖住“百度推荐”四个字,又可以完整的显示推荐的内容。于是我们可以在CSS样式表里加上最大高度值"max-height:300px;"。但是这样还没完成。

max-height:300px”的意思指的是该层中最大高度为300px,如果该层中的元素内容高度大于300px,就截断超出的内容,显示max-height的值。

 因为不同的浏览器对CSS兼容性有所偏差,即便是现在的IE浏览器,你单纯设定了height值,框架里的页面高度也会自动适应。于是我们得给框架的height设定overflow:hidden,意思就是溢出框架的部分将被隐藏起来。

以下是我使用的完整代码,大家可以参考一下。Height值是根据我的实际情况设定的,大家根据自己的情况更改。

test{
 width:555px;
 max-height:300px; _height:300px;
 overflow:hidden;
 position:relative;
 margin:0 22px 15px 22px;

}

如上面所示,红色部分的代码是必须的,其他的根据自己的情况调整。对于IE8等主流浏览器来说,只要设定了属性就可以将溢出框架的部分隐藏起来。但是如果要在更多的浏览器中兼容,比如说IE6、IE7甚至火狐,你就需要添加更多的代码。

为了在IE7中也能正常隐藏最大高度值意外的元素,需要给overflow:hidden;设定position:relative属性,如上面样式代码的绿色部分。这样在IE7中overflow:hidden;才能生效,也就能把“百度推荐”四个字隐藏起来了。

对于IE6而言,给overflow:hidden;设定position:relative属性也是必要的,然后IE6不能辨别max-height这个属性,所以要加上height正常值,。需要特别提醒的是针对IE6高度值的书写规范,这里涉及到了一个顺序问题,并且需要紧接着MAX值加上下划线,如上面样式代码的蓝色部分。

 如此一来,IE6及以上各版本的浏览器都能支持max值得效果了,这些方法不仅可以隐藏“百度推荐”等工具底下的元素,在我们平时的网页设计排版中,均可以以此来达到需求的效果。

最终效果大家可以将页面往下移,直接看OKXUN.com的百度推荐部分就可以了。