对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。( L4 v8 e" m8 Y, `' t- l, X* w
8 x3 t6 n$ O- d1 b* M9 t u
＜divid="jq-header"＞
6 A7 `) o3 }' ?: R' |
9 X+ R% g! m+ ~1 r ＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞
! ]! K% }2 s! w' [, C
9 k- Y! g g) x* w" o* F- j .jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：
5 @0 T( q2 v, y+ r( X1 f) E# c - a& t8 g8 }0 ~% q5 h
#jq-headerh1a{}{
) I- @, q4 e/ f$ ^9 b$ } text-indent:-9999em;
( S# J" @* H$ U/ F( p W background:url（/images/logo_jquery3.png）no-repeat;) f+ q& s* G; d+ v3 X7 R) ?: g
width:116px;7 t0 j% O6 l7 w& Q
height:35px;
( |5 ?, } H5 V% x8 D2 i font-size:0;
& J. x0 }4 ?2 S" O display:block;0 F9 j p- I; [7 ]9 U
border:0!important; c& N3 Q+ D5 Q& K4 r1 c
border-bottom:0;
4 v5 h& ^ |+ A/ r3 C/ i }5 D9 z1 C6 B; j; Y# _5 }/ s
9 ~+ ^ P# B& _1 G4 U4 [ 关键的地方有三处：
5 A9 s1 A& g/ Z : Q5 ?6 [0 f6 R
1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。; @- V! q( y$ y7 y. ?$ i2 @9 {
3 B) ^2 ~% q+ p7 F3 s
2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）+ \! I, E9 @# ?! {1 f+ A
0 d8 b: B8 ?* P; E 3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。4 ~3 G6 W/ E$ D. F
: k |& @6 K/ L# I5 Q K
分析到此为止，细节有时候很重要。
. y3 g: T* k' P& s: s0 r2 L信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com
. e6 k" h, P. ^8 v3 s5 P% P8 G |
