对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
4 P. B8 S" ~& n2 k0 ~
' {9 C- M& V' D5 l Q% [ ＜divid="jq-header"＞
, L% y* T) [* o( o" r4 x6 T4 s % n" @8 ?' Q, ]4 r1 k9 i S# I, e
＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞
& J1 i- U& S2 Z5 h# y1 `) D
; [' ]% l9 ~- R- z .jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：1 Z3 |' p4 A1 u& A K. E2 |4 g# F
) V$ v# V/ q: C G
#jq-headerh1a{}{! W: d3 ]. S$ W$ S" w8 E; q; e+ H ]
text-indent:-9999em;5 h; f' j6 h9 L
background:url（/images/logo_jquery3.png）no-repeat;0 S4 G2 n' M8 S+ y
width:116px;! k( k" g7 C ?; P3 V' a1 b" N# i! D" t
height:35px;1 z8 t' e& `, g
font-size:0;/ a6 ~ Z" f" G9 O8 q% ]- f
display:block;, p+ ]% m% m" K
border:0!important;2 Y& d- Q' o- g% Y2 M
border-bottom:0;/ q6 R! @# O" W. Q0 }
}) ^/ O0 O) r2 A6 w/ j8 H: ?# b
: b, d* } `, D. j. L
关键的地方有三处：
: n ^! x/ P# ]$ p" H # p5 U3 \( j1 X/ \. @2 [ L
1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。3 Q, I+ V U e, Z; E# l
7 [! p' b) `. k6 J! E; m, w 2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）
# ~* a1 `4 m- K( V
2 t" b& j, q8 G# l$ z 3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。0 P5 }& ?5 n& x
9 t X( @* R# G, j( b: U! n# B
分析到此为止，细节有时候很重要。
2 \: M4 n! N1 I信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com
5 n5 {& z6 F, ]3 @/ | |
