黑藍搭配的橫向折角CSS菜單_菜單導航特效

黑藍搭配的橫向折角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">
<head>
<title>黑藍搭配的橫向折角CSS導航菜單</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>

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

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

相關菜單導航特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

黑藍搭配的橫向折角CSS菜單_菜單導航特效

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

菜單導航特效推薦

猜你也喜歡看這些