zoukankan      html  css  js  c++  java

  • 很酷的css菜单

    <html>
    <head>
    <STYLE type=text/css>
    #navigation     {
      background    :#99CCFF; 
      width    :715px; 
      margin    :0 auto; 
      height    :38px; 
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow    : hidden; 
    /* */ 
    }

    #navigation ul     {
      margin    :0; 
      padding    :0; 
      list-style-type    :none; 
      background    :transparent;
          }
    #navigation li     {
      display    :block; 
      float    :left; 
      margin    :0 1px;
          }
    #navigation .snazzy     {
      background    :transparent;
          }
    #navigation .snazzy span     {
        text-align    :center;
        color    :#fff;
        margin    :0;
        font-weight    : normal;
          }
    #navigation .b1, #navigation .b2, #navigation .b3, #navigation .b4     {
      display    :block; 
      font-size    :1px;
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow    : hidden; 
    /* */ 
    }
    #navigation .b1, #navigation .b2, #navigation .b3     {
      height    :1px;
          }
    #navigation .b2, #navigation .b3, #navigation .b4     {
      border-left    :1px solid #fff; 
      border-right    :1px solid #fff;
          }
    #navigation .b1     {
      margin    :0 5px; 
      background    :#fff;
          }
    #navigation .b2     {
      margin    :0 3px; 
      border-width    :0 2px;
          }
    #navigation .b3     {
      margin    :0 2px;
          }
    #navigation .b4     {
      height    :2px; 
      margin    :0 1px;
          }
    #navigation .boxcontent     {
      display    :block; 
      border-left    :1px solid #fff; 
      border-right    :1px solid #fff;
          }

    #navigation a.menu, #navigation a.menu:visited     {
        display    :block;
        text-decoration    :none;
        width    :100px;
        font-family    : Arial, Helvetica, sans-serif;
        font-size    : 14px;
          }

    #navigation a.current span, #navigation a.current:visited span     {
      padding-top    :10px;
          }

    #navigation a.menu:hover     {
      background    :transparent; 
      cursor    :pointer;
          }

    #navigation a.current:hover     {
      cursor    :default;
          }

    #navigation a.menu:hover span     {
      padding-top    :10px;
          }


    #navigation .red     {background:#c00;}
    #navigation .orange     {background:#f90;}
    #navigation .yellow     {background:#b8b800;}
    #navigation .green     {background:#090;}
    #navigation .blue     {background:#00c;}
    #navigation .indigo     {background:#309;}
    #navigation .violet     {background:#c6c;}
    #navigation .lace     {background:#e0e0d5;}
    #navigation .slate     {background:#bcdae9;}
    #navigation .salmon     {background:#ffa07a;}
    #navigation .mint     {background:#f5fffa;}

    span     {background:#000}
    </STYLE>
    </head>

    <body>
    <center>
    <DIV id=navigation>
    <UL>
    <LI><A class=menu title="AccessKey: a" accessKey=a href="../menu/index.html"><B class=snazzy><SPAN class="boxcontent red">Demos</SPAN> <B class="b4 red"></B><B class="b3 red"></B><B class="b2 red"></B><B class=b1></B></B></A></LI>
    <LI><A class=menu title="AccessKey: b" accessKey=b href="../menus/index.html"><B class=snazzy><SPAN class="boxcontent orange">Menus</SPAN> <B class="b4 orange"></B><B class="b3 orange"></B><B class="b2 orange"></B><B class=b1></B></B></A></LI>
    <LI><A class="menu current" title="AccessKey: c" accessKey=c href="#nogo"><B class=snazzy><SPAN class="boxcontent yellow">Layouts</SPAN> <B class="b4 yellow"></B><B class="b3 yellow"></B><B class="b2 yellow"></B><B class=b1></B></B></A></LI>
    <LI><A class=menu title="AccessKey: d" accessKey=d href="../boxes/index.html"><B class=snazzy><SPAN class="boxcontent green">Boxes</SPAN> <B class="b4 green"></B><B class="b3 green"></B><B class="b2 green"></B><B class=b1></B></B></A></LI>
    <LI><A class=menu title="AccessKey: e" accessKey=e href="../mozilla/index.html"><B class=snazzy><SPAN class="boxcontent blue">Mozilla</SPAN> <B class="b4 blue"></B><B class="b3 blue"></B><B class="b2 blue"></B><B class=b1></B></B></A></LI>
    <LI><A class=menu title="AccessKey: f" accessKey=f href="../ie/index.html"><B class=snazzy><SPAN class="boxcontent indigo">Explorer</SPAN> <B class="b4 indigo"></B><B class="b3 indigo"></B><B class="b2 indigo"></B><B class=b1></B></B></A></LI>
    <LI><A class=menu title="AccessKey: g" accessKey=g href="../opacity/index.html"><B class=snazzy><SPAN class="boxcontent violet">Opacity</SPAN> <B class="b4 violet"></B><B class="b3 violet"></B><B class="b2 violet"></B><B class=b1></B></B></A></LI></UL>
    </DIV><!-- end of navigation -->
    </center>
    </body>
    </html>
  • 相关阅读:
    Vue
    数组去重、数组中的对象去重
    Vue 拖拽组件 vuedraggable 、 vue-dragging 、awe-dnd
    如何衡量一个人的 JavaScript 水平？
    八个免费的Vue图标库
    vue中使用animate.css实现动画
    web本地存储（localStorage、sessionStorage）
    vue引入iconfont报错
    RESTful API 最佳实践
    mysql 用户管理和权限设置
  • 原文地址：https://www.cnblogs.com/chengulv/p/298541.html
Copyright © 2011-2022 走看看