几个导航栏也算对学过知识的回顾,总有新的收获,下面是学习过程中敲的代码:
<!DOCTYPE HTML> <html> <head> <title></title> <meta charset="utf-8"/> <style> ul{ list-style-type: none; 100px; } a{ display: block; /*设为block修改其样式,而不是修改li标签*/ text-decoration:none; background-color:#ccc; height: 30px; line-height: 30px; 100px; margin-bottom: 1px; text-indent:20px; } li{ } a:hover{ background-color:#f60; color:#fff; } </style> </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>下面css代码使其水平导航:
ul{ list-style-type: none; } a{ display: block;/*设为block修改其样式,而不是修改li标签*/ text-decoration:none; background-color:#ccc; height: 30px; line-height: 30px; 100px; margin-bottom: 1px; text-align:center; } li{ float:left; } a:hover{ background-color:#f60; color:#fff; }
下面再次改进为伸缩效果:
ul{ list-style-type: none; height:30px; border-bottom:3px solid #f60; margin:0 auto; 800px; padding-left: 200px; } a{ display: block;/*设为block修改其样式,而不是修改li标签*/ text-decoration:none; background-color:#ccc; height: 30px; line-height: 30px; 100px; margin-bottom: 1px; text-align:center; border-radius:10px 10px 0 0; } li{ float:left; 100px; margin: 0 auto; } a:hover{ background-color:#f60; color:#fff; height:40px; margin-top:-10px; line-height: 40px; }改进后效果如下:
下面用js改进,实现鼠标放上去变宽效果:
<!DOCTYPE HTML> <html> <head> <title></title> <meta charset="utf-8"/> <style> ul{ list-style-type: none; height:30px; border-bottom:3px solid #f60; margin:0 auto; 800px; padding-left: 200px; } a{ display: block;/*设为block修改其样式,而不是修改li标签*/ text-decoration:none; background-color:#ccc; height: 30px; line-height: 30px; 100px; margin-bottom: 1px; text-align:center; border-radius:10px 10px 0 0; } li{ float:left; 100px; margin: 0 auto; } a:hover{ background-color:#f60; color:#fff; height:40px; margin-top:-10px; line-height: 40px; } </style> <script> window.onload=function(){ var oa=document.getElementsByTagName('a'); for(var i=0;i<oa.length;i++) { oa[i].onmouseover=function(){ var that=this; that.time=setInterval(function(){ that.style.width=that.offsetWidth+8+'px'; if(that.offsetWidth>=120) { clearInterval(that.time); } },30); } oa[i].onmouseout=function(){ var that=this; that.time=setInterval(function(){ that.style.width=that.offsetWidth-8+'px'; if(that.offsetWidth<=120) { that.style=width='120px'; clearInterval(that.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>
效果: