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{ 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