今天小编跟大家讲解下有关兼做美工之导航条制作过程分享 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关兼做美工之导航条制作过程分享 的相关资料，希望小伙伴们看了有所帮助。
使用的材料：
做成的效果：
事实上 整个过程 还是写css比较耗时间 主要是浏览器兼容性方面和ie的png背景图片透明搞得比较久
一、浏览器兼容性：
主要是css中cursor差异性（其他做的过程中忘了）：
cursor在ie6很奇怪 我开始在li层设置鼠标形状为手指 ie6显示无效 向复层的ul div设置都无效 后来试了设置了li里面的div 奇迹出现了 鼠标手指出现了 这里我理解为：ie6解析dom的时候 设置鼠标作用于标签内有内容的第一个父元素有效 而且我感觉中 ie6很多方面都存在这样的设计方案。
二、ie6使png背景图片变透明
ie6上 显示png是不透明的 所以要通过ie特有的透镜效果 设置png透明 但是为了兼容fx等其他浏览器 要用到css hack 就是利用ie特有解析css符号如* 写在原本css属性的下面 遇到ie6的时候 ie6解析* 覆盖原来的css 这样讲好像很复杂 看如下css：
.mun_contant{ width:80px; height:25px; text-align:center; background-image:url(images/menu/tab_normal.png); background-position:center; background-repeat:no-repeat; line-height:235%;} *html .mun_contant{margin:0px auto; height:25px;width:65px; line-height:235%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=http://xyrl.com/skin/7ke/image/nopic.gif background:none;}
当遇到ie6的时候 *html下的.mun_contant覆盖上面的.mun_contant,而其他浏览器不识别 *html 所以就跳过
上面的代码：filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=http://xyrl.com/skin/7ke/image/nopic.gif background:none
就是使用滤镜解决png透明问题的；但是ie6这样用的后果是 背景图片的position设置会无效 背景图片的位置动不了了 后来我解决的办法是 移动背景图片的div块实现居中
这个导航 还有一个难点 由于没有使用<a>标签 1.需要自己写js实现页面的跳转 但是跳转后 2.点击的标签要选中状态 3.选定的标签不受鼠标移进移出影响（我设想的是鼠标移出移进事件和点击事件完全分离 不能产生耦合）
解决：
第一个好解决 在li加个rev属性 写上链接的地址 然后绑定点击事件 获取点击event 然后设置window.location=rev.value
第二个 想了蛮久的 最后考虑到 页面链接刷新的时候 唯一准确的变量就是地址栏的内容 然后我就写了一个加载监控 遍历li的rev值 如果匹配地址栏的地址（用到了lastIndexof()） 这个li标签就选定
第三个 也比较麻烦 后来还好jQuery有个方法为addClass() 可以叠加覆盖原来的class 这样就简单啦 完全就可以分开鼠标移进移出事件和click事件了 是一种叠加思想 原来class是：a鼠标移进移出是addClas（b）和removeClass（b） 鼠标选中时 addClass（b_1）（b_1和b的样式一样 但是为了叠加 只能取不同的class名字）,当鼠标点中后：a被b_1覆盖 当鼠标移到被选中的li时 b_1被b覆盖（两个样式内容一样 所以没有变化） 鼠标移出 remove b 所以这时候被选中的样式还原为b_1,还是不变
来源：爱蒂网
