一个网站，logo（标志）是肯定少不了的。最常用的就是图片logo或直接打几个字当作logo，当然，也有用flash的，但这部分人几乎少得可以忽略。

毫无疑问，图片logo远比文字好看，图片可以色彩缤纷变幻无穷，而文字变来变去都那样。但直接用文字logo的还是有很多，因为纯文字更利于搜索引擎识别，图片就不行了。

有没有两全其美的方法呢？有的人使用这种：

<a href="#"><img src="/logo.png" title="图片说明" alt="图片说明"/></a>

搜索引擎无法看到图片，但可以看到图片说明，这样也就相当于文字了————这也是SEO中强调要给图片加上alt的原因。

但其实这种方法并不完美，很多人都不喜欢加alt标记，而且这样对搜索引擎到底有没有妨害也难说清。下面介绍一种国际国内通用的方法.

html代码，非常简单：

<a href="#" class="logo">这是logo</a>

有人说你这不是要讲图片logo吗？咋速成文字了？别急，还有CSS代码呢：

.logo{background:url(images/logo.png) no-repeat;/*把你的logo图片设成背景图*/

height:60px;width:150px;/*设置宽高*/

text-indent:-9999px;/*设置文字缩进*/
}

CSS代码最关键的一步就是最后的text-indent，text-indent的意思是文字缩进，它的单位一般是正数，用来将段落前空格。但这里把它的单位设为了负值，-9999px，于是原本在A标签里面的文字就被缩到不知道哪儿去了。

这样一来，用户看到的就是图片logo（背景图），而搜索引擎看到的却是正宗的文字，一举两得了。效果可参考本站logo。

举一反三，这种方法可以用来制作图片导航栏和标题栏，但我不推荐哈，因为这两者需要做的图片太多了，麻烦，而且修改起来更麻烦。

另:特别不推荐使用flash当作logo，因为搜索引擎完全无法识别它．除非，你想到方法扬长避短．

本文链接: http://www.jo2.org/archives/112.htm.转载请保留.