利用div+css生成简单的导航菜单，简单实用

最新推荐文章于 2024-09-13 15:41:23 发布

恼火的昵称

最新推荐文章于 2024-09-13 15:41:23 发布

阅读量506

点赞数

分类专栏： Div+Css 文章标签： css div xhtml float menu html

本文链接：https://blog.csdn.net/chenglidian/article/details/6621122

版权

Div+Css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用div+css生成简单的导航菜单，简单实用，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { background-color: #666; }
#menu { width: 1000px; height:30px; border-bottom:#FF0000 1px solid; }
 #menu ul { margin: 0; padding: 0; list-style: none; }
 #menu ul li { display:inline;}
 #menu ul li a { float:left;color: #DDBB04; margin-right: 3px; text-decoration: none; font: 13px Arial, Helvetica, sans-serif; padding-top: 12px; padding-right: 15px; padding-left: 15px; }
 #menu ul li a:hover { border-bottom: 3px solid #DDBB04; color: #FFFFFF; }
</style>
</head>
<body>
	<div id="menu">
    	<ul>
          	<li><a href="#">Homepage</a></li>
          	<li><a href="#">P士大夫</a></li>
          	<li><a href="#">Services</a></li>
          	<li><a href="#">About Us</a></li>
          	<li><a href="#">Contact Us</a></li>
          	<li><a href="#">Entries RSS</a></li>
        	<li><a href="#">Comments RSS</a></li>
		</ul>
	</div>
</body>
</html>