分类导航菜单的制作（附源码）--HTML

不多说，直接贴代码哈！有疑问，可追加评论哈！

demo.html:

<!DOCTYPE html>
<html>
<head>
　　<title>分类导航菜单</title>
　　<meta charset="utf-8">
　　<meta name="keywords" content="keyword1,keyword2,keyword3">
　　<meta name="description" content="this is my page">
　　<meta name="content-type" content="text/html; charset=UTF-8">
　　<link href="css/demo.css" rel="stylesheet" text="text/css"/>
</head>
<body>
　　<nav>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<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>
　　　　　　<li><a href="#">商务合作</a></li>
　　　　　　<li><a href="#">教育培训</a></li>
　　　　　　<li><a href="#">创业专区</a></li>
　　　　</ul>
　　</nav>
</body>
</html>

demo.css:

@CHARSET "UTF-8";
*{padding:0;margin:0;}
nav{border:1px solid #BCFF1D;font-size:12px;background:#D6FF8C url(../images/background.gif)
no-repeat top left;float:left;height:128px;}
nav ul{list-style:none;width:312px;margin:2px;}
nav ul li{width:104px;float:left;height:45px;text-align:center;line-height:35px;}
nav ul li a{background:url(../images/menu.gif) no-repeat;display:block;text-decoration:none;color:black;padding-left:18px;}
nav ul li a:hover,nav ul li a:active{background-position:0px -55px;color:#ff3300;font-weight:bold;}

Effect picture：

源码文件下载：分类导航菜单.zip

posted @ 2017-10-14 10:58  牛新龙的IT技术博客  阅读(1749)  评论(0)  编辑  收藏  举报