对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
3 Y7 R- Z: {. B& z2 _* Y" @ . R* |7 |8 t; u- B
＜divid="jq-header"＞
2 Z4 t" b# [6 ~: B $ A& p& ^5 x, P0 Q& L! l
＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞9 t) S( G5 f/ g# |" e' n1 Y
7 P {' Q$ C# L, I. F .jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：
" X: W' C. }3 l* h! a( U* n% Q 3 X; g! v2 R% ~1 B7 y, S5 k
#jq-headerh1a{}{7 R9 C1 k: p$ j: {0 n# S& f* y/ m% u
text-indent:-9999em;3 Y# O/ ^5 X3 Q
background:url（/images/logo_jquery3.png）no-repeat;
6 O' R6 W( p. o2 W5 O# M3 v width:116px;) A* r4 h" k% W, P% t* |. B
height:35px;( g6 _- w# V5 z* d8 l
font-size:0;
6 d2 m! o5 W% ~+ R4 W3 n display:block;: M g' [1 ~* a- |8 L" v
border:0!important;
! Y5 ~3 r" D: r4 ]" I border-bottom:0;
9 M2 u% I+ z( i! h& J6 a: e }- V1 M* Y4 b; i* g
2 |- `2 p+ r% R0 O 关键的地方有三处：
9 s0 P C" s! D% Z! K 6 l' k6 G2 Q& ]% J' o: V
1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。3 |5 g: \( g: h3 E0 R1 z
6 w% O# O1 n; D7 g- v 2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）; Q) |' m5 V6 Y( E+ Z9 t7 y( ~
. Z! k4 D# k: Z) L6 |; ?( G7 {6 `" X
3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。. E2 M. x! l9 x1 ~
" c; H) l5 d) q# w9 ~ 分析到此为止，细节有时候很重要。
2 ~+ Y1 x4 x4 ^: ]2 q信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com
$ T) V& W- A+ X2 g* k5 f, m |
