• 很酷的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>
  • 相关阅读:
    Unity 坐标系及相互转化
    Unity 接口&接口类
    Unity 场景管理/切换
    Unity 光照系统中的阴影
    《算法竞赛进阶指南》0x41并查集 银河英雄传说(边带权并查集)
    《算法竞赛进阶指南》0x41并查集 NOI2015程序自动分析
    《算法竞赛进阶指南》0x38概率与期望 扑克牌
    《算法竞赛进阶指南》0x38概率与数学期望 绿豆蛙的归宿
    《算法竞赛进阶指南》0x38概率与数学期望 Rainbow
    基于Python的模拟退火算法SA 以函数极值+TSP问题为例(gif动态展示)
  • 原文地址:https://www.cnblogs.com/chengulv/p/298541.html
Copyright © 2020-2023  润新知