仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 585|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 带来一篇IE6中背景属性加a与a:hover成绩

[复制链接]
再见西城 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:32:35 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
网页制造poluoluo文章简介:改良IE6中a与a:hover的背景撑持.
在IE6中背景属性加a与a:hover二者的伪类分离,在一般逻辑下为什么不起感化?测试这成绩存在IE6及以下扫瞄器,这成绩我常常碰到在之前一向接纳别的办法取而代之,如今找到了另外一种办理。
以导航为例,上面的代码完整切合CSS的逻辑,实际上应当是”a:hove的背景图片”分离”a.nav_1的背景定位”而得出料想的了局,但IE6却非常地只显现背景图片而没有对上背景坐标Demo(请利用IE6与IE6以上扫瞄器尴尬刁难比)。
*{margin:0;padding:0;}
.header{position:relative;width:745px;height:225px;background:url(bg.jpg)no-repeat;}
/*导航*/
#navp{position:absolute;left:0;bottom:0;width:100%;}
#nava{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nava:hover{background:url(bg.jpg)no-repeat00;}
/*导航经由形态:IE6及以下扫瞄器不兼容,别的扫瞄器一般*/
#nava.nav_1{width:80px;background-position:0-213px;}
#nava.nav_2{width:86px;background-position:-80px-213px;}
#nava.nav_3{width:227px;background-position:-166px-213px;}
#nava.nav_4{width:92px;background-position:-393px-213px;}
#nava.nav_5{width:98px;background-position:-485px-213px;}
#nava.nav_6{width:162px;background-position:-583px-213px;}

之前我利用的办理计划是,再经由形态增加对应的选择符。这办法感到代码显得对照痴肥,而关于代码洁癖的我是对照难承受的Demo。
/*导航经由形态:之前的办理计划*/
#nava.nav_1:hover,
#nava.nav_1{width:90px;background-position:0-211px;}
#nava.nav_2:hover,
#nava.nav_2{width:86px;background-position:-80px-213px;}
#nava.nav_3:hover,
#nava.nav_3{width:227px;background-position:-166px-213px;}
#nava.nav_4:hover,
#nava.nav_4{width:92px;background-position:-393px-213px;}
#nava.nav_5:hover,
#nava.nav_5{width:98px;background-position:-485px-213px;}
#nava.nav_6:hover,
#nava.nav_6{width:162px;background-position:-583px-213px;}

实际上”a.nav_1″选择符比”a:hover”要高,但我实验增加!important时测试发明IE6却显现一般Demo。

而测试别的扫瞄器也无反作用,此次仿佛与haslayout有关了,但其发生缘故原由与了局也却让人百思不得其解
/*导航经由形态:如今的办理计划*/
#nava.nav_1{width:80px;background-position:0-211px!important;}
#nava.nav_2{width:86px;background-position:-80px-213px!important;}
#nava.nav_3{width:227px;background-position:-166px-213px!important;}
#nava.nav_4{width:92px;background-position:-393px-213px!important;}
#nava.nav_5{width:98px;background-position:-485px-213px!important;}
#nava.nav_6{width:162px;background-position:-514px-213px!important;}

ytzong供应的办理办法很不错赞~,看来不利用背景缩写仍是有它的优点。IE6在背景相加的逻辑上切实其实是有成绩,一样测试过border属性则不存在这成绩Demo。
*{margin:0;padding:0;}
.header{position:relative;width:745px;height:225px;background:url(bg.jpg)no-repeat;}
/*导航*/
#navp{position:absolute;left:0;top:180px;width:100%;}
#navpa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#navpa:hover{background-image:url(bg.jpg);background-repeat:no-repeat;}
/*导航经由形态:IE6及以下扫瞄器不兼容,别的扫瞄器一般*/
#navpa.nav_1{width:80px;background-position:0-213px;}
#navpa.nav_2{width:86px;background-position:-80px-213px;}
#navpa.nav_3{width:227px;background-position:-166px-213px;}
#navpa.nav_4{width:92px;background-position:-393px-213px;}
#navpa.nav_5{width:98px;background-position:-485px-213px;}
#navpa.nav_6{width:162px;background-position:-583px-213px;}

不晓得还没有更好的办法呢~
</p>
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
兰色精灵 该用户已被删除
沙发
发表于 2015-1-17 23:11:07 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
再见西城 该用户已被删除
板凳
 楼主| 发表于 2015-1-31 15:02:15 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
蒙在股里 该用户已被删除
地板
发表于 2015-2-6 20:51:30 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
精灵巫婆 该用户已被删除
5#
发表于 2015-2-18 19:21:30 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
因胸联盟 该用户已被删除
6#
发表于 2015-3-6 10:39:00 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
不帅 该用户已被删除
7#
发表于 2015-3-13 00:34:31 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
分手快乐 该用户已被删除
8#
发表于 2015-3-20 08:25:53 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 02:49

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表