後來自己看了下它的處理方法,分析了下,大家一起來看看吧!
CSS代碼如下:
複製內容到剪貼簿
代碼:
body.index h1 {width: 30%; height: 130px; margin-left: 0; background: url(/files/theme/branding-h1.png) no-repeat 50% 50%; text-indent: -9999px;}
body.index h1 a {display: block; height: 130px;}
XHTML代碼
複製內容到剪貼簿
代碼:
<h1><a href="/" title="The Web Standards Project">The Web Standards Project</a></h1>
看出關鍵了嗎?對,就是這裡text-indent: -9999px;.
我們知道,text-indent是用來設定段落開頭第一個字留白的位置,而這裡設定成-9999px,很自然,在H1
width: 30%; height: 130px;
這樣一個範圍類,字就在顯示地區之外,看不到了,而後就顯示了它的背景url(/files/theme/branding-h1.png) no-repeat 50% 50%了,還有接下來就是a標籤設定display:block;height:130px;我們的A標籤就是一個塊了,裡面顯示的是背景圖片,點A標籤的時候,就好象我們是單擊的一張圖片了.
那麼這麼做跟直接用img標籤顯示的圖片的好處在哪裡呢?
這個問題問得好,這麼做是為什麼呢?我想大家一定聽說過寫標準頁它的另一個好出就是,對搜尋引擎的友好.我們做關鍵字的時候,就是要看你寫的關鍵字再你頁面裡出現的內容的次數.而搜尋引擎目前還沒有那麼智能,主要還是搜裡頁面裡的文本文字.而搜文本的優先順序(我個人的看法),是先看你頁面裡的h1-h6標籤,然後是strong標籤.
因為H1標籤和strong標籤(預設)的字都是加粗的,表明在這個文章段落裡面,這個標籤之間的東西是你所希望強調顯示的內容,是比較重要的.呵呵,明白了嗎,這麼些,你不但語意你比較合理,還做了SEO的最佳化了.