您的位置:首页 >科技 >正文

科技常识:兼做美工之导航条制作过程分享

今天小编跟大家讲解下有关兼做美工之导航条制作过程分享 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关兼做美工之导航条制作过程分享 的相关资料,希望小伙伴们看了有所帮助。

使用的材料:

做成的效果:

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

来源:爱蒂网

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。