对于任何一个网站来说名字是SEO的首选，而H1标签是搜索引擎认为页面上最重要的文字部门，所以我们要把网站的名字放在H1中；问题是代表网站名字的通常是一个LOGO图片，而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。6 r0 T# C( H+ `$ n4 |$ Z/ Q
5 w- |- }5 N7 `- M! L ＜divid="jq-header"＞
0 c' _% A% @# B, o 6 V* c# `! Q5 ]7 Q' @6 _" G
＜h1＞＜a＞jQuery:TheWriteLess,DoMoreJavaScriptLibrary＜/a＞＜/h1＞" r- {- i& z- H& ?
# W! v2 \3 o% p" z: V( M- I
.jquery的界面做的很棒，SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的，和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢，大家都能猜到，是CSS，请看下面的一段CSS代码：; f' ?$ Q/ e# K, {$ U2 o, a( |# `
3 @' d3 O8 U# j, O
#jq-headerh1a{}{) |( M8 V* d. F* [6 }) F
text-indent:-9999em;/ R, {- x0 x+ T6 H9 G" ^( J
background:url（/images/logo_jquery3.png）no-repeat;
) {7 [7 A% ?' r# a% r width:116px;+ K1 ]/ [$ s- y) m7 N) j
height:35px;. T6 _% x6 c/ j8 B
font-size:0;* Z, U, N/ q4 f& U& I! A
display:block;
0 V/ t1 S; L6 ~2 f, w( z y border:0!important;! \4 `+ C p' }- G" _) y
border-bottom:0;+ x) B0 y) F- _9 c
}. ^# D. a+ w2 }+ y+ O2 _
. M3 C, @! O+ [7 j2 n
关键的地方有三处：
' V9 P" r5 T/ O/ A: R8 J / f6 i0 t" k: {3 K! y# S3 |& k9 S5 w
1.text-indent设定了一个很大的负数值，这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方，用来欺骗搜索引擎的文字就从浏览器的界面上消失了。* O7 ?0 _) [' a6 M9 N$ x% W0 _
9 M9 W ]3 V# y% E6 K
2.只有这样还是不够的，还需要让用户从浏览器中看到LOGO图片，在CSS中肯定就是background了，注意url（）括号里面的内容可以用引号也可以不用，如果不用的话就可以省掉俩字符。-:）
, |; p% {3 x& X4 z6 P& W
- F- s3 z5 Z0 E: j% y: B0 e. k 3.光有上面的两步还是不够的，我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上，显示一个小手，由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了，所以浏览器不认为背景图片的地方有链接；这时候就用到了下面的width，height，display的设定。% g* U- j+ g2 A7 C) |- I
$ S2 L+ ?5 c# ?$ W1 ?
分析到此为止，细节有时候很重要。* Z1 Z: `9 W7 T4 h5 l
信息来源：简单购-中国，转载请保留链接，谢谢。http://www.cnjdg.com/ I1 x3 | I" {: X. [; l
|
