导航标签

效果图：

代码：

<!doctype html>
<html>
  <head>
    <title>测试案例</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="http://10.237.100.82/res/css/micloudfe/widget/reset.css"/>
    <style>      
      .navigate{ position:relative; height:100px; }
      .navigate div{ position:absolute; width:0; height:0; opacity:0.5; border:12px solid transparent; -webkit-transition:all .2s ease; }
      .navigate .navigate-top{ left:42px; border-bottom-width:22px; border-bottom-color:green; }
      .navigate .navigate-right{ left:70px; top: 38px; border-left-width:22px; border-left-color:green; }
      .navigate .navigate-bottom{ left:42px; top:66px; border-top-width:22px; border-top-color:green; }
      .navigate .navigate-left{ left:4px; top:38px; border-right-width:22px; border-right-color:green; }
      .navigate div.enabled,
        .navigate div:hover{ opacity:0.7; }
    </style>
  </head>
  <body>
    <div class="navigate clearfix">
      <div class="navigate-top enabled"></div>
      <div class="navigate-right"></div>
      <div class="navigate-bottom"></div>
      <div class="navigate-left"></div>
    </div>
  </body>
</html>

 

posted @ 2013-09-03 16:09  小菜38  阅读(174)  评论(0)    收藏  举报