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><class=menu title="AccessKey: a" accessKey=a href="../menu/index.html"><class=snazzy><SPAN class="boxcontent red">Demos</SPAN> <class="b4 red"></B><class="b3 red"></B><class="b2 red"></B><class=b1></B></B></A></LI>
    <LI><class=menu title="AccessKey: b" accessKey=b href="../menus/index.html"><class=snazzy><SPAN class="boxcontent orange">Menus</SPAN> <class="b4 orange"></B><class="b3 orange"></B><class="b2 orange"></B><class=b1></B></B></A></LI>
    <LI><class="menu current" title="AccessKey: c" accessKey=c href="#nogo"><class=snazzy><SPAN class="boxcontent yellow">Layouts</SPAN> <class="b4 yellow"></B><class="b3 yellow"></B><class="b2 yellow"></B><class=b1></B></B></A></LI>
    <LI><class=menu title="AccessKey: d" accessKey=d href="../boxes/index.html"><class=snazzy><SPAN class="boxcontent green">Boxes</SPAN> <class="b4 green"></B><class="b3 green"></B><class="b2 green"></B><class=b1></B></B></A></LI>
    <LI><class=menu title="AccessKey: e" accessKey=e href="../mozilla/index.html"><class=snazzy><SPAN class="boxcontent blue">Mozilla</SPAN> <class="b4 blue"></B><class="b3 blue"></B><class="b2 blue"></B><class=b1></B></B></A></LI>
    <LI><class=menu title="AccessKey: f" accessKey=f href="../ie/index.html"><class=snazzy><SPAN class="boxcontent indigo">Explorer</SPAN> <class="b4 indigo"></B><class="b3 indigo"></B><class="b2 indigo"></B><class=b1></B></B></A></LI>
    <LI><class=menu title="AccessKey: g" accessKey=g href="../opacity/index.html"><class=snazzy><SPAN class="boxcontent violet">Opacity</SPAN> <class="b4 violet"></B><class="b3 violet"></B><class="b2 violet"></B><class=b1></B></B></A></LI></UL>
    </DIV><!-- end of navigation -->
    </center>
    </body>
    </html>
  • 相关阅读:
    深入理解JVM(2)——揭开HotSpot对象创建的奥秘
    深入理解JVM(3)——垃圾收集策略详解
    深入理解JVM(4)——对象内存的分配策略
    深入理解JVM(1)——JVM内存模型
    学习 IOC 设计模式前必读:依赖注入的三种实现
    学习Struts--Chap07:Struts2文件上传和下载
    POJ2823_Sliding Window
    POJ3378_Crazy Thairs
    POJ2374_Fence Obstacle Course
    POJ3709_K-Anonymous Sequence
  • 原文地址:https://www.cnblogs.com/chengulv/p/298541.html
Copyright © 2011-2022 走看看