兼做美工之导航条制作过程分享
兼做美工之导航条制作过程分享
发布时间:2016-12-27 来源:查字典编辑
摘要:使用的材料:做成的效果:事实上,整个过程,还是写css比较耗时间,主要是浏览器兼容性方面和ie的png背景图片透明搞得比较久一、浏览器兼容性...

使用的材料:

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

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

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

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

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

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

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

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

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

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

做成的效果:

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

事实上,整个过程,还是写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,还是不变

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类