CSS无序列表创建的标准菜单

 首页 > 网页特效 > 菜单特效 > CSS无序列表创建的标准菜单

CSS无序列表创建的标准菜单

 2018-07-12  429  收藏  0 赞一个  0 真差劲  0 去评论

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS菜单</title>
<style type="text/css">
html,body {
		margin:0;
		padding:0;
		color:#222;
		background:#fff;
}
body {
		padding:10px;
		font:76%/150% Verdana, Arial, sans-serif;
}
#nav {
		margin:0;
		padding:0;
		background:#808259;
		width:100%;
		float:left;
		border:1px solid #42432d;
		border-width:1px 0;
}
#nav li {
		display:inline;
		padding:0;
		margin:0;
}
#nav a:link,#nav a:visited {
		color:#000;
		background:#b2b580;
		padding:20px 40px 4px 10px;
		float:left;
		width:auto;
		border-right:1px solid #42432d;
		text-decoration:none;
		font:bold 1em/1em Arial, Helvetica, sans-serif;
		text-transform:uppercase;
		text-shadow: 2px 2px 2px #555;
}
	#nav a:hover {
		color:#fff;
		background:#727454;
}
	#nav li:first-child a {
		border-left:1px solid #42432d;
}
	#home #nav-home a,
	#about #nav-about a,
	#archive #nav-archive a,
	#lab #nav-lab a,
	#reviews #nav-reviews a,
	#contact #nav-contact a {
	background:#e35a00;
	color:#fff;
	text-shadow:none;
}
	#home #nav-home a:hover,
	#about #nav-about a:hover,
	#archive #nav-archive a:hover,
	#lab #nav-lab a:hover,
	#reviews #nav-reviews a:hover,
	#contact #nav-contact a:hover {
	background:#e35a00;
}
	#nav a:active {
	background:#e35a00;
	color:#fff;
}
</style>
</head>
<body id="home">
<ul id="nav">
	<li id="nav-home"><a href="#">我的博客</a></li>
	<li id="nav-about"><a href="#">日志排行</a></li>
	<li id="nav-archive"><a href="#">日志存档</a></li>
	<li id="nav-lab"><a href="#">我的书库</a></li>
	<li id="nav-reviews"><a href="#">活动图集</a></li>
	<li id="nav-contact"><a href="#">联系我们</a></li>
</ul>
</div>

<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

用LI无序列表创建的标准CSS菜单，这是国外一个网站的CSS制作教程，源码爱好者重新整理了一下，去除了广告代码，兼容性不错，在IE6/IE7/IE8、火狐下都表现很好，研究CSS的朋友请注意一些CSs的用法，很新颖。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行