为什么没有显示效果?代码在Sublime Text编写的,在360页面打开?是兼容性的问题吗?还是代码出错了?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航菜单</title> <style type="text/css"> /* background:url(juxing.png)圆角矩形的实现 */ *{margin:0 ;padding:0;font-size: 14px;} ul{list-style: none;height:50px;padding-left:300px;border-bottom: 5px solid #f60;} li{float:left;margin-top: 20px;} a{text-decoration: none;display: block;height:30px;line-height: 30px;width:120px;background: #ccc;margin-bottom: 1px;text-align: center;;} .on,a:hover{background:#f60;color:#fff;height:40px;line-height:40px;margin-top: -10px;} </style> <script type="text/javascript"> window.onload=function(){ var aA=document.getElementsByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function(){ clearInterval(This.time); var This=this; This.time=setInterval(function(){ This.style.width=This.offsetWidth+8+"px"; if(This.offsetWidth>=160){ clearInterval(This.time) } },30); } aA[i].onmouseout=function(){ clearInterval(This.time); var This=this; This.time=setInterval(function(){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=100){ This.style.width="100px"; clearInterval(This.time) } },30); } } } </script> </head> <body> <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">关于我们</a></li> </ul> </body> </html>
代码在Sublime Text编写的,在360页面打开?是兼容性的问题吗?还是代码出错了?