<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>水平导航</title>
<style type="text/css">
*{margin: 0; padding: 0; font-size: 14px}
a{text-decoration: none;color: #333}
.nav{list-style: none; height: 30px; margin-top: 20px; border-bottom: 5px solid #f60; padding-left: 50px;}
.nav li{float: left;}
.nav li a{display: block; width: 100px; height: 30px; line-height: 30px; background: #efefef; text-align: center;margin-left: 1px}
.nav li a.on,.nav li a:hover{background-color: #f60;color: #fff; height:35px; line-height: 35px; margin-top: -5px;}
</style>
</head>
<body>
<ul class="nav">
<li><a class="on" 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>
水平导航菜单制作
最新推荐文章于 2024-07-10 09:29:11 发布