網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

黑藍(lán)搭配的橫向折角CSS菜單_菜單導(dǎo)航特效

黑藍(lán)搭配的橫向折角CSS菜單，亮點(diǎn)就是它的折角，完全是用CSS實(shí)現(xiàn)，沒有使用任何帶有修飾性的資源圖片等。好好研究一下這段代碼，試著把折角改小一點(diǎn)，這樣就會接近圓角的效果，還不錯吧？

<!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">
<head>
<title>黑藍(lán)搭配的橫向折角CSS導(dǎo)航菜單</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style>
#container {
  position:relative; 
  }
#menu {
  text-align:center; 
  position:relative; 
  height:8em;
  }
.box {
  position:relative; 
  float:left; 
  top:30px;
  }
#menu a, #menu a:visited {
/* / */
  position:relative; 
  text-decoration:none; 
  background-color:#06a; 
  color:#fff; 
  display:block; 
  width:70px; 
font-size:9pt;
  height:15px; 
  padding:5px;
  margin:0 1px;
  }
#menu a .topleft, #menu a .topright {
  position:absolute; 
  top:0; 
  width:0; 
  height:0; 
  overflow:hidden;
  border-top:10px solid #fff;
  }
#menu a .topleft {
  left:0; 
  border-right:10px solid #06a; 
  }
#menu a .topright {
  left:70px; 
  border-left:10px solid #06a; 
  }
#menu a:hover {
  background-color:#000; 
  }
#menu a:hover .topleft {
  border-right:10px solid #000; 
  border-top:10px solid #fff;
  }
#menu a:hover .topright {
  border-left:10px solid #000; 
  border-top:10px solid #fff;
  }
</style>
</head>
<body>
<div id="container">
  <div id="menu">
    <div class="box">
      <a href="/">
       CodeFans
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="/">
        ASP
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="/">
       PHP
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="/">
       AJAX
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="/">
        JQUERY
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
  </div>
</div>
</body>
</html>

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

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

相關(guān)菜單導(dǎo)航特效：

黑藍(lán)搭配的橫向折角CSS菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些