CSS打造黑色简洁菜单代码

代码简介:同样是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>
<title>CSS打造黑色简洁菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	font-family:宋体;
	font-size:12px;
	background:#666;
}
#main_nav {
	list-style:none;
	margin:100px;
}
#main_nav li {
	float:left;
}
#main_nav li a {
	display:block;
	padding: 10px 20px;
	background:#000;
	color:#FFF;
	border:1px solid #000;
	text-decoration:none;
	text-transform:capitalize;
}
#main_nav li a:hover {
	background:#ccc;
	color:#000;
	border:1px solid #000;
}
</style>
</head>
<body>
<ul id="main_nav">
  <li><a href="/">Ajax/JavaScript下载</a></li><li><a href="/">ExtJS实例</a></li><li><a href="/">jQuery代码</a></li><li><a 

href="http://www.webdm.cn">CSS特效</a></li><li><a href="/">HTML精选</a></li><li><a href="http://www.webdm.cn">在线编辑器</a></li><li><a 

href="/">Mootools举例</a></li><li><a href="/">Prototype框架</a></li>
</ul>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

代码来自:http://www.webdm.cn/webcode/f0f6fcc0-eb54-4f83-af9a-6863b67bdfbc.html

posted @ 2011-03-01 09:06  网页代码站  阅读(360)  评论(0编辑  收藏  举报