兼做美工之导航条制作过程分享

发布时间：2023-03-07 18:27:23 来源：互联网

.

春天来了，花园里开满了花，有梅花，有迎春花，有山茶花，有丁香花，真是太好看了。

使用的材料：

做成的效果：

事实上，整个过程，还是写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="images/menu/tab_normal.png"); background:none;}/** ie6 **/

当遇到ie6的时候，*html下的.mun_contant覆盖上面的.mun_contant,而其他浏览器不识别 *html，所以就跳过

上面的代码：filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="images/menu/tab_normal.png"); 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,还是不变

到此这篇关于兼做美工之导航条制作过程分享就介绍到这了。平凡人生要用平凡的心去对待，你的人生将会更精彩。更多相关兼做美工之导航条制作过程分享内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： 制作过程导航条