位置：首页>> 网络编程>> 网页设计>> WEB前端开发经验总结（3）

WEB前端开发经验总结（3）

作者：海啸　来源：Yaohaixiao博客　发布时间：2009-07-20 18:01:00　

标签：开发,经验,前端,web

对SEO有些了解的朋友都知道，搜索引擎搜索关键字的时候，是先对XHTML标签里的<meta>标签的keyword部分的文字，然后就是标题里的文字，接着就是正文中的h1~h6标签，然后是strong标签中的文字。而我们网站的名称，毫无疑问的会作为关键字的。

所以我这里用h1标签模拟了<img />标签的效果，将网站名称这个关键字在页面里出现了一次，而且是以正文中搜索引擎分析的优先级最好的h1标签，以说明该内容在页面中的关键性。具体的实现代码这里就直接写出来：

#topbar h1{
  float:left;
  width:220px;
  height:58px;
  line-height:58px;
  overflow:hidden;
  font-size:18px;
  color:#060;
  text-indent:-999px;
  background-image:url(../img/logo.png);
}
#topbar h1 a:link,
#topbar h1 a:visited,
#topbar h1 a:hover{
display:block;
width:220px;
height:58px;
line-height:58px;
overflow:hidden;
background-color:transparent;
}
<h1><a href=”http://www.yaohaixiao.com/” target=”_blank” title=”海啸的地盘–享受生活，享受每一天！”>海啸的地盘–享受生活，享受每一天！</a></h1>

看了代码，我想大家也很明白了，我们这里利用了text-indent、overflow:hidden;属性以及display:block。我们把LOGO图片作为h1标签的背景，然后用text-indent设置一个超大的负值，然后结合overflow:hidden;属性，让h1标签里面的字都超出到它的布局范围内，overflow:hidden后就在h1标签里看不到文字了，而LOGO图片背景显示出来了。

接着一个关键就是将a标签模拟成图片链接的效果。我们首先将a标签display属性设置为block,强制将a标签显示成块级元素（块级元素和行内元素的知识我们下面马上给大家介绍），给它设置布局大小，这样我们a标签里就是一个块了，而这个块刚好是我们背景logo图片的大小，让你点击的时候感觉是点的一个图片链接，而我们的a标签是嵌套在h1标签里的，继承了H1的text-indent属性，里面的文字超出了a标签的布局范围，没有显示出来，而显示了图片（其实是背景图）。呵呵，图片链接就这样被我们模拟出来了，不过为了更像图片链接，我们又给a标签添加了title属性，来模仿img标签的alt属性，呵呵，模拟得够像吧。

第一页上一页 1 2

4 5 下一页

投稿

WEB前端开发经验总结（3）

猜你喜欢