对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
2 {8 @% r+ C: t+ ?
& q: w1 }% K/ E4 A$ n ＜divid="jq-header"＞
5 u( n& ^9 z: N/ r
, ^) M* s/ t. K+ `7 u ＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞
1 l/ M! m' X; x9 m) E5 A( B# Q U, d; l0 H ; K3 v! \# d4 v( m7 M. A- ^
.jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：, b; o* j/ [0 h- I- y/ n' s% z! X
i, {) k8 E& |+ p% u #jq-headerh1a{}{" b- ^8 G6 u9 g5 r/ Y5 a; e+ t- a
text-indent:-9999em;
& G1 q3 w2 U8 C background:url（/images/logo_jquery3.png）no-repeat;0 J. Q: E- K& C4 H! [$ q
width:116px;
. H' O- r% [: ?1 e& v: }- `5 j height:35px;
. X+ X# z/ F: J# j" x font-size:0;1 ?7 Q4 K# U0 A6 I7 }1 o7 u, J
display:block;
) I/ J1 b7 z N5 u border:0!important;5 Q1 q8 h% P( ^0 t W" E( h
border-bottom:0;
; U6 e3 b4 w) U k% \/ H }
+ y5 I. ?' J. M* r! O. X8 u6 t + @6 n v" |3 G: t V
关键的地方有三处：
. H! P: W1 e! Y7 V+ L1 a. H$ A 9 F7 X+ z: j0 J5 n
1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。, O# B$ w/ s. b3 `. r; ?$ @
Z0 l! G! l9 \; ] x
2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）- l. M0 x$ D. u9 p
. [( k- F4 g1 T/ J1 A: O! \( w
3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。
% o, s0 ^: `! J- V4 K# c ) p: ~0 U0 R% J2 e0 B1 Y
分析到此为止，细节有时候很重要。 H3 z7 a) C4 H' v/ Y" O6 j0 q m% S
信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com( U3 L9 [5 H5 s
|
