萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS隱藏文字的方法

CSS隱藏文字的方法

  h1標簽對提高SEO關鍵詞排名的作用想必是個站長都知道,但是h1標簽會使文字變大,有時候會在網頁中顯得格格不入。下面小編來跟大家分享下CSS隱藏文字的方法。

CSS隱藏文字的方法 三聯

  下面就拿網絡教學基地logo部分用CSS隱藏文字來給大家舉例:

  我們從h1代碼部分看到的其實只是文字描述,但是為了整體美觀考慮,我們把h1標簽裡面的a鏈接文字用CSS隱藏,並且設置背景圖片logo,這樣外觀看到的就是logo圖片

  CSS隱藏文字代碼:

  h1 a {

  height: 80px;

  width: 280px;

  float: left;

  text-indent: -9999px;

  background-image: url(http://www.studynb1.com/images/logo.png);

  background-repeat: no-repeat;

  display: block;

  position: relative;

  outline: none; /* 去掉Firefox點擊時產生的虛線框 */

  }

  這裡我們指定了text-indent: -9999px;讓文字在最下層,然後在設置了: background-image:背景圖層logo,意思就是讓文字在圖片下面,這樣就簡簡單單實現了用CSS隱藏文字,最後設置了outline: none;,是為了解決去掉IE和Firefox浏覽器點擊的時候產生的虛線框。

  以上就是小編給各位網站SEOer們分享的css隱藏文字的方法,注意每個頁面只能用一個h1哦,不然風險很大。

 

  本文屬網絡教學基地原創,轉載請注明:http://www.studynb1.com/css/149.html

copyright © 萬盛學電腦網 all rights reserved