版权声明：本文为桑海田原创文章，转载请注明此文章，否则，追究侵权责任。 https://blog.csdn.net/lxh_gdmu/article/details/48927875
(做法一)效果图：
导航菜单.html
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>导航菜单</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="daohang">
<div id="d1"><a href="#">首页</a></div>
<div id="d2">关于医学院</div>
<div id="d3">就业指导中心</div>
<div id="d4">创业园</div>
<div id="d5">专业咨询</div>
</div>
</body>
</html>
style.css
@charset "gb2312";
/* CSS Document */
#daohang{
width:1366px;
height:35px;
background:#06C;
}
#d1,#d2,#d3,#d4,#d5{
width:220px;
padding-top:12px;
padding-left:50px;
color:#FFF;
float:left;
border-left:1px solid #666;
}
a{text-decoration:none}
a:link{color:#FFF;}
a:visited{color:#999}
a:hover{color:#FF0}
（做法二：列表）效果图：
导航菜单栏做法2.html
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>导航菜单做法2</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="daohang">
<ul>
<li><a href="#">主页</a></li>
<li>产品</li>
<li>联系</li>
<li>简介</li>
<li>关于</li>
</ul>
</div>
</body>
</html>
style.css
@charset "gb2312";
/* CSS Document */
#daohang{
width:1366px;
height:30px;
background:#03F;
margin:0,auto;
}
ul{
list-style:none;
}
ul li{
width:220px;
float:left;
color:#FFF;
border-right:1px solid #333;
text-align:center;
padding-top:5px;
height:25px;
}
a{text-decoration:none}
a:link{color:#FFF;}
a:visited{color:#999}
a:hover{color:#FF0}