您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

CSS隱藏文字的方法

h1標(biāo)簽對(duì)提高SEO關(guān)鍵詞排名的作用想必是個(gè)站長都知道,但是h1標(biāo)簽會(huì)使文字變大,有時(shí)候會(huì)在網(wǎng)頁中顯得格格不入。下面小編來跟大家分享下CSS隱藏文字的方法。

下面就拿網(wǎng)絡(luò)教學(xué)基地logo部分用CSS隱藏文字來給大家舉例:

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

  CSS隱藏文字代碼:

  h1 a {

  height: 80px;

  width: 280px;

  float: left;

  text-indent: -9999px;

  background-image: url(http://m.pkvc.cn/UploadFiles/2014-10/2/201410241258556440.png);

  background-repeat: no-repeat;

  display: block;

  position: relative;

  outline: none; /* 去掉Firefox點(diǎn)擊時(shí)產(chǎn)生的虛線框 */

  }

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

  以上就是小編給各位網(wǎng)站SEOer們分享的css隱藏文字的方法,注意每個(gè)頁面只能用一個(gè)h1哦,不然風(fēng)險(xiǎn)很大。

[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.pkvc.cn/tutorial/wd2518.html
X-UA-Compatible屬性的解釋
css中不確定高度垂直居中2種方法
圖趣網(wǎng)微信
建議反饋
×