02_05.a伪类-优快云博客

本文展示了一个针对ITeye网站设计的导航栏HTML代码实例。该实例使用了HTML和CSS来实现一个包含多个IT相关分类的顶部导航菜单，每个菜单项都链接到相应的页面。此导航栏设计简洁且易于理解，适用于技术社区或博客网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">

		div{display: block;}
		div,ul,li{margin: 0;padding: 0;}
		ul{ list-style: none;}
		.menu{ width: 990px;height: 44px;background: #BE0000; margin: 0 auto; 	 }
		.menu li{float: left; height: 42px; padding: 0 11px; line-height: 44px;/*margin-left: 10px;*/ border-right: solid 1px white; }
		.menu li a:link{font-family: 宋体; color: white; font-weight: bold; text-decoration: none;}
		.menu li a:visited{font-family: 宋体; color: white; font-weight: bold; text-decoration: none;}
		.menu li:hover{background: #990100;}
		.menu  span li {border-right: none;}

	</style>	
</head>
<body>
	<div class="menu">
		<ul class="clearfix">
			<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>
			<li><a href="#">问答</a></li>
			<li><a href="#">ITeye</a></li>
			
			<li><a href="#">CODE</a></li>
			<li><a href="#">会议</a></li>
			<li><a href="#">招聘</a></li>
			<li><a href="#">培训</a></li>
			<li><a href="#">外包</a></li>
			<span><li><a href="#">EMS</a></li></span>
		
		</ul>
	</div>
</body>
</html>