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

2024-09-05 12:20:10

字体：大中小

来源：转载

供稿：网友

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

<!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">我的博客</li>	<li id="nav-about">日志排行</li>	<li id="nav-archive">日志存档</li>	<li id="nav-lab">我的书库</li>	<li id="nav-reviews">活动图集</li>	<li id="nav-contact">联系我们</li></ul></div></body></html>

上一篇：向上展开的多级CSS菜单

下一篇：CSS Tab 滑动导航

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注