对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。0 N- Y3 C* {9 l3 Z# [" V
* H0 i6 f& N9 T: I+ J- `' e! @ ＜divid="jq-header"＞
6 l, g3 L) P) j: l ]1 t$ M) i7 L5 l) o
- U9 J3 _( ~) @9 g ＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞
( S% [1 c* o9 s1 b
) }$ D" a( Y0 {% }8 a S% { .jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：
+ k4 ^2 g" z U5 t n # w. D0 O) j5 J6 m0 f, k
#jq-headerh1a{}{
3 Q/ ~, l% G/ k text-indent:-9999em;
5 [0 H" F# ]" w$ j7 T( m) q# L background:url（/images/logo_jquery3.png）no-repeat;" B6 `$ f: i, c( W
width:116px;: g' [- o1 G4 ~! w0 E1 i
height:35px;
9 J; ` ]0 Y4 Y+ } font-size:0;
% U/ R* ~0 b4 g# m) Y8 _ display:block;
2 O2 b; f- {, l* S1 _ T7 s- W border:0!important;( N6 E: O: u- n9 P P, i
border-bottom:0;# a, X: d. |8 Y" h/ C3 v9 x: \4 ]
}5 {8 l- G0 k! y5 a# f. k% v; u* ?
1 P0 n6 a5 I7 _; K! x 关键的地方有三处：# e9 w( b- T) K$ K. f: r, O- w/ M {7 j
) {, z; c5 C. f4 ]; L# ~
1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。
+ I% Z, }, o/ o; L * j2 {$ `* S% \( ~0 N
2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）- Y+ Z! |# W4 C# W- S% b1 Q( W. Y% W
1 B3 {, L" M; Q 3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。; F) b r& Z& @( n0 J6 \8 D
3 }: h8 a9 { l' W2 p2 o# q/ o' ?
分析到此为止，细节有时候很重要。
! I8 g0 g" k; x. \信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com
8 H5 Q; `6 n* N7 J* s9 ?1 d5 E |
