网站的LOGO是网站的灵魂，我们可以从谷歌和百度经常更新自己设计的独到的LOGO可以看到。但我们大多数站长来说，LOGO可能是不会经常换的，但问题是，众多搜索引擎对于图片的理解能力相对较差，而对链接或者说锚文本的认识却比较独到。那么，我们是否可以利用链接来替换图片呢?
或许，你认为不可能，但事实并非如此。利用DIV+CSS，我们可以轻松的实现这个预想。
首先，一个正常的LOGO位置我们会怎么写呢?
< div id="logo" >< a href="http://www.hezewangzhan.com" >< img src="/image/logo.gif" alt="菏泽网站建设" / >< /a >< /div >
这样写是正常的，但问题是百度等搜索引擎对于图片的理解能力有限，即便我们加上了alt标签，但百度还是很可能不认这个。为什么我们要将这么重要的位置让给一个图片呢?
经过一段研究，我想到了另外的解决方法，将代码改造成如下：
< h1 id="logo" >< a href="http://www.hezewangzhan.com" >菏泽网站建设< /a >< /h1 >
OK,如面的代码，我们将图片去掉，而使用了直接的锚文本，为了凸显主体，我们还是用了h1标签。再一次强调了这个关键词。
好了，直接在浏览器中显示这段文字绝对是让你尴尬的，那么我们要怎么来在CSS中控制这段代码呢?
#logo { width:170px; height:88px; background:url(/image/logo.gif) no-repeat; text-indent:-10000px;}
#logo a { display:block; width:170px; height:88px;}
宽度和高度的控制这个不必详细说明，说一下几个重要的部分：
1：text-indent:-10000px; 这段代码是说，文本缩进负一万像素，也就是说，跑到云霄之外了。因此，文字会看不见的。这种隐藏文字的方法是目前为止我遇到的一种最好的方法，毫不夸张的说，没人教我这招儿，是我自己研究出来的。但在我看了CSS禅意花园这本书之后知道，一名叫做rundle的国外设计师最早使用这种文字隐藏的方法。
2：background:url(/image/logo.gif) no-repeat;这段代码是使用背景图片，也就是我们设计的LOGO。如果说前面的是隐藏，这里就是替换，那么综合来说，这就是“图像替换文本”的一个小小的CSS技巧。
当然，思维开阔的人还会有其他不同的方法，譬如：如下代码：
#logo { width:170px; height:88px; background:url(/image/logo.gif) no-repeat;}
#logo a { display:none;}
这代代码比我提供的代码更为简洁，不是吗?问题是，百度或者其他搜索引擎如果抓取CSS的话，很可能认为你这是作弊。不过更多的SEOER认为搜索引擎是不读取CSS的。所以，这个我就不得而知了。
但，问题并没有结束，因为，如果没有A呢?也就是说，我们不加链接，貌似就只有我上面的解决方法了。
当然，还有其他的，如字体是0，这样的设计是我认为不可取的，因为这样字不是不会显示，而是会显得特别的小。大家可以试验一下。
对了，站长网在每个文章的每段前面都加两个全角的空格，用来表示断行的意思。我认为这个不妥。因为这个无疑增加了网页的大小。使用 text-indent:2em;即可实现这个效果。站长站就是这样做的。
这些代码的用处并非是只有这些，给大家展示一个我客户的网站:http://www.feiyuedianchi.com 这个网站的代码和展示效果将会让你吃惊!如果你的浏览器禁用CSS，我相信，这个网页依然能够清晰的给你这个网站的构架和想要表达的内容。
你还有更好的点子吗?欢迎与各位探讨!
文章首发：http://www.hezewangzhan.com/news/news/6911.html转载请保留链接。
