对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。( c" j5 R2 u! g( u" L+ d- h
, d, ]6 O) }2 x9 R
＜divid="jq-header"＞6 e2 u3 G n" ]7 `2 {
) K$ w _* a6 _5 h, ^- } ＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞
- r( u" I$ _8 b2 {! l
) o2 M. v+ U( N$ a! O/ x3 K .jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：
8 E6 S+ p0 M+ L& L6 F3 f) m8 {$ G ) i1 a7 @1 a& r( P% Y3 D# e
#jq-headerh1a{}{
; Z6 q3 W" h5 O6 a text-indent:-9999em;
! s" ^3 Z F$ C/ n, q4 \3 v background:url（/images/logo_jquery3.png）no-repeat;
: E/ M0 P, a5 m {( H! A8 J width:116px; V% p: D: v# R# ?9 e: ]4 L3 p
height:35px;
" n8 }8 F: L/ ] font-size:0;4 Q2 Q# }9 J/ d0 M4 o
display:block;3 [& A3 k5 `( x8 B3 M8 k
border:0!important;
Z1 ]; n+ |+ f5 U7 w7 M$ C border-bottom:0;
2 B7 r( V% p6 s/ N }
$ k! c2 p2 ]% O( [. E7 k# S - [# H; {/ ?4 G
关键的地方有三处：* t. S6 f- \$ d$ x9 T2 }6 d( r
1 y/ o7 q, ]% z
1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。
& ~5 c) P0 `6 e9 b7 {1 ^$ I/ K 6 s! W5 N8 x; A' N+ f0 t
2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）0 U/ y/ A; s' S7 X. R
" a3 ]3 \, P0 A, F# G7 H+ r2 Y/ F 3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。
/ I0 T1 K, |5 e- O+ j3 h# s |
. J* [# p8 J* b b' s1 F 分析到此为止，细节有时候很重要。
4 C7 E) L; d" \& |0 }信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com( f- O& l+ i# d; G& Z; f( d
|
