CSS实现绿色带阴影自适应宽度的菜单代码

最新推荐文章于 2022-05-14 16:15:00 发布

weixin_34088598

最新推荐文章于 2022-05-14 16:15:00 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webdm/archive/2011/03/08/1976859.html

一款绿色带阴影划过变色的纯CSS自适应宽度菜单，可在多行显示，适用于各种网页布局需求。通过简单的CSS样式调整即可轻松集成到现有项目中。

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

代码简介：

绿色带阴影划过变色自适应宽度的纯CSS菜单，用了超多的修饰词来形容她，因为确实很不错哦！它可以在多行上显示，老外的东西就是不一样，不佩服不行哦。使用的时候可以单独将菜单部分摘去，再优化一下CSS，这样更完美了。

代码内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS实现绿色带阴影自适应宽度的菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
html,body{
	margin:0;
	padding:30px 10px;
	text-align:center;
}
#outer{
	width:780px;
	margin:auto;
	text-align:left;
	border:1px solid #000;
}
#outer{overflow:hidden;position:relative}
.navwrap{
	float:left;
	position:relative;
	left:50%;
	text-align:left;
	margin-bottom:2em;
}
.navwrap ul{
	list-style:none; 
	position:relative;
	left:-50%;
	margin:0;
	padding:0;
} 
.navwrap li{
	border:1px solid #eff2df;
	float:left;
	margin:0 10px 0 0;
	background:#809900;
}
.navwrap li.last{margin-right:0}
.navwrap li a{
	float:left;
	border:1px solid #4c7300;
	position:relative;
	left:-2px;
	top:-2px;
	background:#eff2df;
	color:#4c7300;
	text-decoration:none;
	padding:6px 10px;
	font-weight:bold;
}
.navwrap li a:hover{
	background:#809900;
	color:#fff;
}
p{clear:both;padding:10px}
h1{text-align:center;margin:1em 0;}
.clearer{
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	clear:both;
}

</style>
<!--[if IE ]>
<style type="text/css">
.navwrap ul{float:left;} 

</style>
<![endif]-->
</head>
<body>
<div id="outer">
	<h1>Welcome To WebDm.cn</h1>
	<div class="navwrap">
		<ul>
			<li><a href="/">Button 1</a></li>
			<li><a href="/">Button 2's a WebDm.cn</a></li>
			<li><a href="http://www.webdm.cn">This is Button 3</a></li>
			<li><a href="#">B 4</a></li>
			<li><a href="/">jQuery Demos</a></li>
			<li class="last"><a href="/">Ajax</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	<div class="navwrap">
		<ul>
			<li><a href="#">ASP Codes</a></li>
			<li><a href="http://www.webdm.cn">Hello World!</a></li>
			<li class="last"><a href="/">WebDm.cn</a></li>
		</ul>
	</div>
	<div class="clearer"></div>
	<!-- ie needs this clearer -->
	</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/2cf486f4-d179-420b-88ab-f6f33d37bf6e.html

转载于:https://www.cnblogs.com/webdm/archive/2011/03/08/1976859.html