兼作美工之导航栏条制做全过程共享

日期:2021-03-12 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

应用的原材料:

做成的实际效果:

客观事实上,全部全过程,還是写css较为耗時间,关键是访问器适配性层面和ie的png情况照片全透明搞得较为久

1、访问器适配性:

关键是css中cursor差别性(别的做的全过程中忘了):

cursor在ie6很怪异,我刚开始在li层设定电脑鼠标样子为手指,ie6显示信息失效,向复层的ul,div设定都失效,后来试了设定了li里边的div,惊喜出現了,电脑鼠标手指出現了,这里我了解为:ie6分析dom的情况下,设定电脑鼠标功效于标识内有內容的第1个父元素合理,并且我觉得中,ie6许多层面都存在这样的设计方案计划方案。

2、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块完成垂直居中

这个导航栏,也有1个难点,因为沒有应用<a>标识,1.必须自身写js完成网页页面的自动跳转,可是自动跳转后,2.点一下的标识要选定情况 3.选定的标识不会受到电脑鼠标移进移出危害(我构想的是电脑鼠标移出移进恶性事件和点一下恶性事件彻底分离出来,不可以造成藕合)

处理:

   第1个好处理,在li加个rev特性,写上连接的详细地址,随后关联点一下恶性事件,获得点一下event,随后设定window.location=rev.value

   第2个,想了蛮久的,最终考虑到到,网页页面连接更新的情况下,唯1精确的自变量便是详细地址栏的內容,随后我就写了1个载入监管,遍历li的rev值,假如配对详细地址栏的详细地址(用到了lastIndexof()),这个li标识就选定

   第3个,也较为不便,后来还好jQuery有个方式为addClass(),能够叠加遮盖原先的class,这样就简易啦,彻底便可以分开电脑鼠标移进移出事了件和click恶性事件了,是1种叠加观念,原先class是:a电脑鼠标移进移出是addClas(b)和removeClass(b),电脑鼠标选定时,addClass(b_1)(b_1和b的款式1样,可是以便叠加,只能取不一样的class姓名),当电脑鼠标点中后:a被b_1遮盖,当电脑鼠标移到被选定的li时,b_1被b遮盖(两个款式內容1样,因此沒有转变),电脑鼠标移出,remove b,因此这时候候被选定的款式复原为b_1,還是不会改变 

上一篇:html css中id和class的差别较为 返回下一篇:没有了