对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
) P5 B" l+ c9 C/ Q : L# I% q) e; v; Z0 N
＜divid="jq-header"＞1 h* y$ |. S n3 n, @+ T1 @& ?* Z
$ ~' Z( `8 Q7 [8 M) e6 f$ K
＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞1 [ Z1 N$ X) M$ ?0 Q& f* K
+ o2 s% S6 n& G" J* m .jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：
- b: \1 |4 j* L* c
! C: \# A, {' {$ q4 X1 Q #jq-headerh1a{}{
/ A j7 S- V. E4 b( u+ J/ |4 ] text-indent:-9999em;
4 q+ f. I$ R- U9 i& j" z background:url（/images/logo_jquery3.png）no-repeat;
- \2 N1 y2 D+ G, F8 c9 f. ~7 r width:116px;2 q# e" m) g" J
height:35px;
% p1 |: \6 |4 L+ l/ `0 @% x8 @ font-size:0;* i! P2 M5 m- V2 K5 O# g% h: ?
display:block;
" d) U- d4 c- P6 T0 x. ~- T, e0 b border:0!important;
5 W+ A0 t( [7 ~# m0 k border-bottom:0;
- [5 W6 F- V: c }
( {! ~2 w/ `; C0 l; c
' e; O% E; B! f' w/ j5 K 关键的地方有三处：/ f6 h5 g- K% E8 W" i5 r6 n* I0 W, s
; J7 s4 Y& p7 q9 I" v; c3 K
1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。
$ d& J9 N7 v5 O ) O- s1 x* A, E, J+ n4 o
2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）% N4 r. _1 I: Q$ u
9 k6 E# g5 x, M/ O
3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。
/ z4 f8 W( N( p# x' D' @. h 4 P- `% ~4 p4 M6 P1 [
分析到此为止，细节有时候很重要。
/ D5 G- L- M5 }$ O% |; r信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com( B1 v5 `5 S: Q8 g7 F
|
