zoukankan      html  css  js  c++  java
  • CSS实现绿色带阴影自适应宽度的菜单代码

    代码简介:

    绿色带阴影划过变色自适应宽度的纯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{
    	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

  • 相关阅读:
    MySQL数据库的主从同步
    学习Java必看的Java书籍(高清中文最新版附下载链接)
    servlet重点知识总结
    JUnit & JMockit单元测试
    mongodb重点知识总结
    Quartz学习总结
    IDEA使用总结
    bat脚本知识总结
    linux shell脚本相关知识
    SpringMVC重点知识总结
  • 原文地址:https://www.cnblogs.com/webdm/p/1976859.html
Copyright © 2011-2022 走看看