CSS隱藏文字的方法
2014/10/24 14:42:50來源:三聯(lián)網(wǎng)
h1標簽對提高SEO關鍵詞排名的作用想必是個站長都知道,但是h1標簽會使文字變大,有時候會在網(wǎng)頁中顯得格格不入。下面小編來跟大家分享下CSS隱藏文字的方法。
下面就拿網(wǎng)絡教學基地logo部分用CSS隱藏文字來給大家舉例:
我們從h1代碼部分看到的其實只是文字描述,但是為了整體美觀考慮,我們把h1標簽里面的a鏈接文字用CSS隱藏,并且設置背景圖片logo,這樣外觀看到的就是logo圖片
CSS隱藏文字代碼:
h1 a {
height: 80px;
width: 280px;
float: left;
text-indent: -9999px;
background-image: url(http://m.likemindfilms.com/UploadFiles/2014-10/2/201410241258556440.png);
background-repeat: no-repeat;
display: block;
position: relative;
outline: none; /* 去掉Firefox點擊時產(chǎn)生的虛線框 */
}
這里我們指定了text-indent: -9999px;讓文字在最下層,然后在設置了: background-image:背景圖層logo,意思就是讓文字在圖片下面,這樣就簡簡單單實現(xiàn)了用CSS隱藏文字,最后設置了outline: none;,是為了解決去掉IE和Firefox瀏覽器點擊的時候產(chǎn)生的虛線框。
以上就是小編給各位網(wǎng)站SEOer們分享的css隱藏文字的方法,注意每個頁面只能用一個h1哦,不然風險很大。
[教程作者:佚名]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd2518.html
本文地址:http://m.likemindfilms.com/tutorial/wd2518.html
這些是最新的
最熱門的教程