CSS教程之CSS实例:a:hover伪类在IE6下的成绩
那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?网页制造poluoluo文章简介:CSS实例:a:hover伪类在IE6下的成绩.
在处置css的机制上,IE老是有良多让人吐血的举措,但关于他们如今的改善力度仍是值得乐意的。 就拿对伪类:hover的撑持来讲,IE7+终究增加了对a之外别的标签的撑持。关于如许的改善,固然是要鼓掌称快的,但在IE6下,:hover就连对a的撑持都不是那末的尽善尽美。上面就是我想复杂说的一个关于:hover在IE6及更早扫瞄器下的成绩。
良多人大概都已晓得了:hover在IE6及更早扫瞄器(以下称IE6-)下的一些成绩。我次要是想说一下形如a:hoverspan{}如许的成绩。
有的时分为了增添一些复杂的静态效果,经常会借助:hover的协助,好比我们经常会令鼠标经由链接时改动笔墨的色彩。如:
a:hover{color:#F00;}
<ahref="?">鼠标经由时改动我的色彩</a>
是的,这将在一切的扫瞄器中都无效。但假如换成如许:
a:hoverem{color:#F00;}
<ahref="?">鼠标经由时改动我的<em>色彩</em></a>
你会发明在IE6-下甚么都没有产生,我们的款式生效了。对,就是如许,应当良多人都碰着过且已办理了这个成绩。
是的,只必要再增加一个a:hover{}款式就能够办理这个成绩了,内里能够是zoom,padding,margin等属性。以下:
a:hover{zoom:1;}
a:hoverem{color:#F00;}
<ahref="?">鼠标经由时改动我的<em>色彩</em></a>
看着恢复了一般的效果,往想多是由于甚么形成:hover生效的。你可使用zoom,display,padding等等属性来弄定,因而想会不会是由于haslayout。恩,很有大概就是如许。但你接着测试,会发明,不管你在a:hover{}写进任何属性,color啊,font-size啊,overflow啊(乃至是不存在的属性,如xx:yyy),都可使之恢复一般。
测试到这里是否是有点呆头呆脑的感到?对,我也是如许的。至于缘故原由是甚么,我还不晓得,也许有人晓得。
一个a:hover的复杂例子:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-cn"lang="zh-cn"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="Content-Language"content="zh-cn"/><title>:hover在IE6下的成绩</title><metaname="Description"content="IE6andearlier下的:hover成绩"/><styletype="text/css">#navul{zoom:1;overflow:hidden;list-style:none;margin:0;padding:0;background:#CCC;}#navli{float:left;width:100px;height:30px;line-height:30px;text-align:center;}#nava{color:#333;}#nava.en{display:none;}#nava:hover{display:block;background:#333;color:#CCC;}#nava:hover.en{display:inline;}#nava:hover.cn{display:none;}</style></head><body><divid="nav"><ul><li><ahref="#"><spanclass="cn">首页</span><spanclass="en">Homepage</span></a></li><li><ahref="#"><spanclass="cn">旧事</span><spanclass="en">News</span></a></li><li><ahref="#"><spanclass="cn">图片</span><spanclass="en">Picture</span></a></li><li><ahref="#"><spanclass="cn">下载</span><spanclass="en">Download</span></a></li><li><ahref="#"><spanclass="cn">留言</span><spanclass="en">Comment</span></a></li></ul></div></body></html>
例子固然复杂,但马上你又会发明实在中英菜单和一些csstips效果也是那末的复杂。
</p>
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。 技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。 Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。 还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
页:
[1]