网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

作者： 北京网站建设   日期：2008-03-27 05:59:38  来源： http://www.qitongnet.com

    其次,我先声明,这是我根据ANDY BUDD 等人写的书 + 自己的思考 的 SEO技术 结合 起来的

    再次,这不是一项新技术,但是我写出来,是为了告诉大家,其实 北京网站建设,在一些不起眼的地方做seo,反而能起到很好的效果最后,声明一下版权,这篇原创是同时首发于 落伍者  和  我的  博客的听者有心)北京网站建设
    北京网页设计
好了,进入正文 :网站制作
              北京网页设计
      什么是工具提示:  网站建设
                              工具提示是当鼠标停留在具有title属性的元素上的时候, 浏览器可以弹出黄色的小文本框.企通互联
                        可能大家说折痕简单,用JS+CSS一下子就搞定了,但是,用 JS 根本对SEO 一点作用也没有 北京网站制作,不是吗!北京网站建设
                        所以,这里我要介绍的是一种纯CSS工具提示,这样 北京网站设计,可以大大的提高SEO的质量,同时,他也是一种高级的CSS技术.网站建设
           企通互联
这里我们先弄一个例子 : 北京网站制作
          <p>网站设计
          <a href="/"  class="tishi">北京网站制作
          鼠标移动这里  <span>提示语言</span> </a>  将会看见纯CSS工具提示 网页设计
         </p>

这个链接 是   "鼠标移动到这里" 链接到落伍 ,同时,当鼠标 移动到 链接 北京网页设计时,会弹出 纯CSS样式  , 这样, 当搜索引擎的蜘蛛抓取时,是不会把 提示语言给遗漏的 北京网页设计
这样, 就很好的利用这一纯CSS工具,有效的提高SEO效果.

那么,这样提示是如何提示的呢?

    这里,我们需要做的是把  链接 (锚) 的position 属性设置为 relative ,这样,就可以相对于父元素的位置对span的内容进行绝对定位,也就是说,网站设计
无论在网页的哪个地方使用这种技术,都可以在链接的旁边出现提示工具.企通互联
     同时,我们的目的是希望浏览者的鼠标移动到链接是才出现提示,所以,先把span的display属性设置为none

网站建设代码是这样的网站制作
                     a.tishi {企通互联
                                 position:relative;北京网站建设
                              }北京网站建设
                     a.tishi span {网页设计
                                       display:none;网页设计
                                     }

然后,当鼠标移动到这里锚上时, 我们希望这时候能显示 span 的内容了 .北京网站建设
      因此,我们需要将 span 的属性设置为 block,而且仅限于鼠标停留在链接时 (锚太难打了) .

到此为止北京网站建设
我们测试上面的代码,可以出现基本的要求了,就是鼠标停留在链接上时, 网站制作链接旁边会出现SPAN的文本了

现在,我们要让SPAN的文本出现在链接的右下方(因为停留在右下方是最符合浏览者习惯的形式)北京网页设计
所以,我们必须要span的position设置为absolute(绝对定位),看下面的代码:网页设计
                  网站制作
                  a.tishi:hover span {北京网站制作
                                              display:block;北京网页设计
                                              position: absoulte;网站建设
                                              top: 1px;北京网站设计
                                              left: 2px;网站建设
                                           }北京网站设计
基本上,现在就OK了

现在,我们再把 span 这个标签美化一下(完善上面的CSS代码)网站建设
                   a.tishi:hover span {网站制作
                                              display:block;北京网站设计
                                              position: absoulte;网站设计
                                              top: 1px; 网站设计网站建设 企通互联
                                              left: 2px;网页设计
                                              border:1px solid #9f6;网站设计
                                              background-color:#ff6;网站设计
                                              color:#000;北京网站建设
                                              padding:0.3px 0.5px;北京网站设计
                                           }

    好了,这时候可以去浏览器预览了, 效果图 可以 到我的博客上的链接去看看,虽然我的是F2BLOG的,但是他的技术也是这个道理.

    这个方法在FF,IE下都有效, 如果有读者觉得哪方面有问题,请PM我,大家一起研究,一起进步.