网站SEO - WEB标准

此导航为本人原创，运用于公司网站的顶部导航，是CSS精华与Hack的集中体现，详情请看：http://www.loanchina.com

效果截图如下：

CSS精华体现：
1、采用CssSprit技术，减少Http请求，加快图片显示速度；
2、鼠标响应下拉菜单，不使用任何js代码；
3、兼容所有主流浏览器；

制作流程：
1、设计导航菜单，由我们的设计师完成，设计稿可以看导航的最终效果；
2、切割背景图片，完成背景图片的背景设计；
3、根据排版来写样式，样式分为二种，一种兼容IE6及以下，另一种兼容IE7、IE8及其它非IE浏览器；

第三步是最重要最核心的部分，调试兼容分为二类，一种是CSS在各种浏览器下面的兼容问题，另一种是xhtml元素在各种浏览器下的兼容问题，即对老的浏览器和新的浏览器对某些元素的属性支持与否进行调试。
第一种调试其实比较简单，就是一些css的兼容代码，参考代码如下：
#nav { /* 此代码兼容Firefox,Chrome,Safari,Opera */ }
*html #nav { /* 此代码兼容IE6 */ }
*+ html #nav { /* 此代码兼容IE7 */ }
这三种就基本上可以使CSS代码兼容所有的浏览器，不会出现在某一浏览器下面显示正常而在别的浏览器下面布局混乱的现象；
第二种其实就是对某些元素的兼容性进行调试，参考代码如下：
<!--[if lte IE 6]这里是代码<![endif]-->
<!--[if IE 7]这里是代码<![endif]-->
<!--[if gte IE 7]这里是代码<![endif]-->
<!--[if !IE]<!-->这里是代码<!--<![endif]-->
前三行是针对IE的html注释，最后一行是针对非IE的html注释。

完成这两种兼容性的调试后，就大功告成了！现在，可以在各种浏览器下面预览导航的效果了。

分享一下此导航的源码及源文件，有不明白的地方欢迎留言讨论。文件名称: CSS精典导航菜单_1.rar (15.68KB)
文件描述: CSS精典导航菜单
下载地址: http://fs3.bay.cech.com.cn/download/file_share_1876801.html

另此文在我写完不到半小时已经被Google收录，本来还想修改一下标题的，看来暂时还是不修改了。

附图：