对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
0 z$ E" L* P4 v4 @* m, B : w) K9 ?3 y, ?4 `( H
＜divid="jq-header"＞ ^" D& p$ X4 D" ]
8 @ J4 U6 z, j4 b( I5 |2 p% E
＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞
# m8 r0 j* [; X4 b
3 l* K4 ^; h% j& D) \4 K .jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：
% D0 }6 m8 q& I/ A4 l/ }, ^' ^
# R1 f& d+ h% K. R: X" v6 E #jq-headerh1a{}{
# j" ^& B& j* J text-indent:-9999em;: W4 E& h, g- z/ B0 d5 X0 S
background:url（/images/logo_jquery3.png）no-repeat;9 n5 s2 \' {3 f- z; x; a
width:116px;) w7 W+ P1 E: X
height:35px;' P2 t, c* z; s" {5 D7 V1 \
font-size:0;. U) G. F# U" u) K* g- d+ t, d
display:block;, v9 g" J+ q4 J* ?+ m6 g
border:0!important;5 T7 {( O: Y4 P2 O/ n3 J
border-bottom:0;
0 ~6 @! q8 q0 E% [5 E5 N) ]! S( ^ }2 {, `2 `' w/ o" \% g4 R- I
5 q$ W' f: w% m5 Y. ^1 w7 u$ @5 e5 i 关键的地方有三处：/ G+ V3 w5 i% n6 F( m
. L! K, D: j4 q 1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。% R2 l* F& k; g) I" O) o+ y% q+ \
- g0 ^2 N: A) K' Y. i' D1 j8 H9 z, L0 z 2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）
' r% |) |& T+ v- v; ?: E" O2 v$ ~ + ~/ w: ?* l B; a4 X# a
3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。+ H: w% {# ~3 q; n, S9 E) @
+ @, K- I1 |1 Z8 _) e$ {
分析到此为止，细节有时候很重要。6 p% c% |; E4 f# s% @7 k
信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com% H4 Z4 R9 _( \6 B: @
|
