清新帶圓角的CSS豎向菜單_菜單導航特效

完全用CSS實現的圓角豎向導航菜單，特別是下部圓角的實現給菜單增色不少，另外菜單本身選擇的色調看上往也很舒服，清新、自然、大氣，很不錯。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML>
 <HEAD>
  <TITLE> 清新帶圓角的CSS豎向菜單</TITLE>
  <style type="text/css">
 div#BeautifulList{width:300px;margin:20px;font-family: Verdana;}
 #BeautifulList a{display:block;color:#BBE1E7;padding:10px 15px;background-color:#3DA2B6;border-bottom:dotted 1px #A8D3DA;font-size:12px;text-decoration:none;}
 #BeautifulList a:hover{color:#fff;background-color:#58AFC0; font-weight:bold; }
 #BeautifulList h1{margin:0;font-weight:normal;color:#fff;padding:15px;font-size:14px;background-color:#238298}
 #BeautifulFoot h2{color:white;margin:0; font-size:14px;padding:20px 10px;}
 
 /*圓角實現*/
 div.RoundedCorner{background: #3DA2B6}
 b.rtop, b.rbottom{display:block;background: #FFF}
 b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #3DA2B6}
 b.r1{margin: 0 5px}
 b.r2{margin: 0 3px}
 b.r3{margin: 0 2px}
 b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  </style>
 </HEAD>
 <BODY>
  <div id="BeautifulList">
 <h1>CODEFANS.NET CSS MENUS</h1>
 <a href="/">Home</a>
 <a href="/sort/list_1_1.shtml">ASP</a>
 <a href="/sort/list_2_1.shtml">PHP</a>
 <a href="/sort/list_10_1.shtml">DELPHI</a>
 <a href="/sort/list_5_1.shtml">JAVA</a>
 <div id="BeautifulFoot" class="RoundedCorner">
 
 <h2>Welcome to PureDays.CN</h2>
 <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
 </div>
  </div>
 </BODY>
</HTML>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

清新帶圓角的CSS豎向菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些