h1標(biāo)簽的使用技巧
更新時(shí)間：2007年11月24日 11:40:49 作者：
h1標(biāo)簽的正確使用可以達(dá)到seo的目的，那么如何在使用h1標(biāo)簽的同時(shí)，又不失去原有的美觀呢？事實(shí)上，正確使用h1標(biāo)簽，我們既可以達(dá)到seo的目的，也能達(dá)到美觀的目的。大家都知道搜索引擎比較喜歡h1標(biāo)簽。在SEO中h1標(biāo)簽也是很基礎(chǔ)也很重要的一步。但有些時(shí)候?yàn)榱私缑骘L(fēng)格的原因，很多標(biāo)題性的文字做成了圖片。大多數(shù)情況下，切割頁面的時(shí)候就直接用上了圖片。在代碼上，h1標(biāo)簽也就對搜索引擎失去了作用。
其實(shí)通過一點(diǎn)小的調(diào)整則可以將兩者兼顧。我們需要兩張圖片：
1
2
看看這段。h1標(biāo)簽對搜索引擎依然可讀，我們只是利用text-indent:-9999px;將“邀請好友加入”的文字遠(yuǎn)遠(yuǎn)的扔到左邊去了。
<style>
.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url(header.gif) no-repeat;}
.testbox{background:url(bg.gif); width:522px; height:323px;}
</style>
<div class="test">
<h1>邀請好友加入</h1>
</div>
<div class="testbox"></div>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
h1標(biāo)簽還可以這樣使用,當(dāng)然你也可以對h1標(biāo)簽使用樣式比如字體大小，字體顏色之類的，當(dāng)然像上面例子，只是為了達(dá)到seo的目的，就不需要使用樣式對h1標(biāo)簽進(jìn)行修改了，因?yàn)轱@示在用戶面前的是一張圖片。
其實(shí)通過一點(diǎn)小的調(diào)整則可以將兩者兼顧。我們需要兩張圖片：
1
2
看看這段。h1標(biāo)簽對搜索引擎依然可讀，我們只是利用text-indent:-9999px;將“邀請好友加入”的文字遠(yuǎn)遠(yuǎn)的扔到左邊去了。
復(fù)制代碼 代碼如下:
<style>
.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url(header.gif) no-repeat;}
.testbox{background:url(bg.gif); width:522px; height:323px;}
</style>
<div class="test">
<h1>邀請好友加入</h1>
</div>
<div class="testbox"></div>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
h1標(biāo)簽還可以這樣使用,當(dāng)然你也可以對h1標(biāo)簽使用樣式比如字體大小，字體顏色之類的，當(dāng)然像上面例子，只是為了達(dá)到seo的目的，就不需要使用樣式對h1標(biāo)簽進(jìn)行修改了，因?yàn)轱@示在用戶面前的是一張圖片。
相關(guān)文章
div+css實(shí)現(xiàn)的滑動(dòng)門,簡潔,新手上路 (小鴿子系列)
div+css實(shí)現(xiàn)的滑動(dòng)門,簡潔,新手上路 (小鴿子系列)...2007-03-03
針對瀏覽器隱藏CSS之獨(dú)孤九劍...2007-03-03
css通配符的意義說明，學(xué)習(xí)css的朋友，會(huì)經(jīng)常用的著2008-10-10
用css alpha 濾鏡 實(shí)現(xiàn)input file 樣式美化代碼
用css alpha 濾鏡 實(shí)現(xiàn)input file 樣式美化代碼...2007-12-12
用div實(shí)現(xiàn)像table一樣的布局方法
下面是我翻譯的內(nèi)容，是根據(jù)我對文章的理解意譯的，你就別挑哪里翻譯的不對了，我的目的只是傳達(dá)這個(gè)CSS技巧。2008-04-04
CSS優(yōu)化2-(常用CSS縮寫語法總結(jié))
CSS優(yōu)化2-(常用CSS縮寫語法總結(jié))...2007-05-05
在IE下拖動(dòng)滾動(dòng)條時(shí)border消失的解決方法
在IE下拖動(dòng)滾動(dòng)條時(shí)border消失的解決方法...2007-01-01
大家看了就明白了css樣式中類class與標(biāo)識id選擇符的區(qū)別小結(jié)
大家看了就明白了css樣式中類class與標(biāo)識id選擇符的區(qū)別小結(jié)...2007-12-12
前段時(shí)間做一個(gè)小項(xiàng)目碰到了一個(gè)導(dǎo)航制作的方式然后突然想到曾經(jīng)很久以前看到的梯形狀的不規(guī)則導(dǎo)航，就嘗試做了一下。結(jié)果碰到了幾個(gè)問題，后來在同事的提醒下總算完成了，記錄一下也跟大家分享分享。2008-04-04
跨瀏覽器的實(shí)踐:position:fixed 層的固定定位
一般要固定某個(gè)div,我們都會(huì)讓該div{position:fixed},它的下一個(gè)div{position:absolute}看了幾個(gè)國外的關(guān)于CSS的固定定位跨瀏覽解決方案.他們卻反其道而為之2008-11-11