很立体的CSS按钮菜单效果

上一帖《Flash绘制明媚夏日海滩(2)》  下一帖《CSS Hack兼容大全,令您的网页能正常显示在I》

　　网上购物、在线购物、购物搜索 欢迎光临本站购买图书、影视、音乐、数码、百货，手机等商品。

　　<style type="text/css">
　　#menu {display:block; position:relative; background:#edebdc; width:112px; padding:25px; border:1px solid #000; margin:0 auto;}
　　.white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-top:1px solid #ffdc56; border-right:1px solid #957704; border-bottom:1px solid #937603; border-left:1px solid #ffdc56;overflow:hidden; text-align:center;}
　　.blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-family:verdana; font-size:11px; font-weight:bold; overflow:hidden; border-top:1px solid #ffd42e; border-right:1px solid #caa205; border-bottom:1px solid #c9a105; border-left:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:15px; background:#fc0;}
　　.black {position:relative; top:0; left:0; width:102px; height:22px; border:1px solid #000;}
　　.cona {position:relative; top:0; left:0; width:105px; height:25px; border-top:1px solid #d5d3ca; border-left:1px solid #d5d3ca; background:#f7f6ef;}
　　.conb {position:relative; top:0; left:0; width:107px; height:27px; border-top:1px solid #b8b7af; border-left:1px solid #b8b7af; background:#f7f6ef;}
　　.conc {position:relative; top:0; left:0; width:109px; height:29px; border-top:1px solid #9c9b95; border-left:1px solid #9c9b95; background:#f7f6ef;}
　　.cond {position:relative; top:0; left:0; width:111px; height:31px; border-top:1px solid #d5d3ca; border-left:1px solid #d5dc3a; background:#fff; margin-top:2px;}
　　#menu a.switch:visited {text-decoration:none;}
　　#menu a.switch {color:#c00; text-decoration:none; position:absolute;}
　　#menu a.switch:hover {color:#c00; background:#edebdc; cursor:pointer;}
　　#menu a.switch:hover .white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-bottom:1px solid #ffdc56; border-left:1px solid #957704; border-top:1px solid #937603; border-right:1px solid #ffdc56;overflow:hidden; text-align:center;}
　　#menu a.switch:hover .blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-size:11px; font-weight:bold; overflow:hidden; border-bottom:1px solid #ffd42e; border-left:1px solid #caa205; border-top:1px solid #c9a105; border-right:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:17px; background:#eb0;}
　　</style>
　　<div id="menu">
　　<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
　　<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item one">ITEM ONE</span></span></a>
　　</div></div></div></div></div>
　　<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
　　<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item two">ITEM TWO</span></span></a>
　　</div></div></div></div></div>
　　<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
　　<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item three">ITEM THREE</span></span></a>
　　</div></div></div></div></div>
　　<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
　　<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item four">ITEM FOUR</span></span></a>
　　</div></div></div></div></div>
　　<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
　　<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item five">ITEM FIVE</span></span></a>
　　</div></div></div></div></div>

<style type="text/css"> #menu {display:block; position:relative; background:#edebdc; width:112px; padding:25px; border:1px solid #000; margin:0 auto;} .white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-top:1px solid #ffdc56; border-right:1px solid #957704; border-bottom:1px solid #937603; border-left:1px solid #ffdc56;overflow:hidden; text-align:center;} .blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-family:verdana; font-size:11px; font-weight:bold; overflow:hidden; border-top:1px solid #ffd42e; border-right:1px solid #caa205; border-bottom:1px solid #c9a105; border-left:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:15px; background:#fc0;} .black {position:relative; top:0; left:0; width:102px; height:22px; border:1px solid #000;} .cona {position:relative; top:0; left:0; width:105px; height:25px; border-top:1px solid #d5d3ca; border-left:1px solid #d5d3ca; background:#f7f6ef;} .conb {position:relative; top:0; left:0; width:107px; height:27px; border-top:1px solid #b8b7af; border-left:1px solid #b8b7af; background:#f7f6ef;} .conc {position:relative; top:0; left:0; width:109px; height:29px; border-top:1px solid #9c9b95; border-left:1px solid #9c9b95; background:#f7f6ef;} .cond {position:relative; top:0; left:0; width:111px; height:31px; border-top:1px solid #d5d3ca; border-left:1px solid #d5dc3a; background:#fff; margin-top:2px;} #menu a.switch:visited {text-decoration:none;} #menu a.switch {color:#c00; text-decoration:none; position:absolute;} #menu a.switch:hover {color:#c00; background:#edebdc; cursor:pointer;} #menu a.switch:hover .white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-bottom:1px solid #ffdc56; border-left:1px solid #957704; border-top:1px solid #937603; border-right:1px solid #ffdc56;overflow:hidden; text-align:center;} #menu a.switch:hover .blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-size:11px; font-weight:bold; overflow:hidden; border-bottom:1px solid #ffd42e; border-left:1px solid #caa205; border-top:1px solid #c9a105; border-right:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:17px; background:#eb0;} </style> <div id="menu"> <div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black"> <a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item one">ITEM ONE</span></span></a> </div></div></div></div></div> <div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black"> <a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item two">ITEM TWO</span></span></a> </div></div></div></div></div> <div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black"> <a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item three">ITEM THREE</span></span></a> </div></div></div></div></div> <div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black"> <a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item four">ITEM FOUR</span></span></a> </div></div></div></div></div> <div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black"> <a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item five">ITEM FIVE</span></span></a> </div></div></div></div></div>

 

标签: CSS  按钮  效果  立体  菜单  

上一帖《Flash绘制明媚夏日海滩(2)》  下一帖《CSS Hack兼容大全,令您的网页能正常显示在I》

 

 

相关文章

• Photoshop为MM模糊照片磨皮及增强皮肤质感(2)
• 详解Photoshop磨皮与锐化的全面应用(2)
• Photoshop调出照片的古典浅黄色(2)
• Photoshop为MM模糊照片磨皮及增强皮肤质感(1)
• 详解Photoshop磨皮与锐化的全面应用(1)
• Photoshop调出照片的古典浅黄色(1)
• 教你C盘空间不足的有效清理方法
• Windows 7下运行CS 1.6的方法技巧
• 网页中Javascript代码的应用方式
• 删除Word插入表格后生成的空白页