今天为你们介绍四种不一样的形式的导航条，在网页制做中想制做比较好看的菜单导航条，那么看看哪一种形式是你的喜好。html
第一种，垂直菜单导航条的制做this
代码：url
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>垂直菜单的制做</title>
<style>
ul{ list-style:none; width:100px;}
ul li{ height:30px; line-height:30px; width:100px; background:#999; margin-bottom:1px; }
ul li a{ text-decoration:none;padding-left:10px; text-indent:10px;}
li hover{ background:red; }
</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>效果以下：code
第二种，伸缩菜单导航条制做（须要用到js，记得引入.js文件）htm
代码：blog
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>伸缩菜单的制做——水平方向</title>
<style>
*{ margin:0; padding:0; font-size:14px;}
ul{ list-style:none; padding-left:30px; border-bottom:5px solid #F60; height:50px;}
li{ float:left; margin-top:20px; }
a{display:block; text-decoration:none; text-align:center;height:30px; line-height:30px; width:120px; margin-bottom:1px; background:#999; }
.on,a:hover{ background:#f60; color:white; }
</style>
<script>
window.οnlοad=function(){
var aA=document.getElementsByTagName('a');
var timer=null;
for(var i=0;i<aA.length;i++){
aA[i].οnmοuseοver=function (){
clearInterval(timer);
var This=this;
timer=setInterval(function (){
This.style.width=This.offsetWidth+8+'px';
if(This.offsetWidth>=160){
clearInterval(timer);
}
},30);
}
aA[i].οnmοuseοut=function (){
clearInterval(timer);
var This=this;
timer=setInterval(function (){
This.style.width=This.offsetWidth-8+'px';
if(This.offsetWidth<=120){
This.style.width='120px';
clearInterval(timer);
}
},30);
}
}
}
</script>
</head>
<body>
<ul class="nav">
<li><a href="#" class="on">首页</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>效果以下：ip
第三种，水平导航条的制做get
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>水平菜单的制做</title>
<style>
ul{ list-style:none; }
li{ float:left; }
li a{display:block; text-decoration:none; text-align:center;height:30px; line-height:30px; width:100px; margin-bottom:1px; background:#999;}
a:hover{ background:red; color:black;}
</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>效果以下：it
第四种、圆角菜单的制做io
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{ margin:0; padding:0; font-size:14px;}
ul{ list-style:none; padding-left:30px; border-bottom:5px solid #F60; height:50px;}
li{ float:left; margin-top:20px; }
a{display:block; text-decoration:none; text-align:center;height:30px; line-height:30px; width:120px; margin-bottom:1px; background:#999; background:url(images/53846438000168f901200060.jpg);}
.on,a:hover{ background-position:0 -30px; color:black;}
</style>
</head>
<body>
<ul>
<li><a href="#" class="on">首页</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>效果以下：
注：导航条的颜色根据需求能够进行更改。