zoukankan      html  css  js  c++  java
  • 导航菜单

       导航菜单主要是由列表做出来的。不同的导航菜单还需要与<div>相结合来完成的。  

    一种菜单式横着的:

    代码如下写:

    HTML:

    <ul>
      <li><a href="#">业界</a></li>
      <li><a href="#">云计算</a></li>
      <li><a href="#">移动</a></li>
      <li><a href="#">研发</a></li>
     </ul>

    <li><a class="#">程序员 </a></li>

    css:

    ul{
      list-style:none;
      }
      li{
      80px;
      height:50px;
      background-color:#B6131B;
      float:left;
      line-height:50px;
      position: relative;
      top:2px;
      left:0px;
      text-align: center;
      }
      a{
      text-decoration:none;
      color:white;
      font-size:20px;
      font-weight:bold;
      font-family: "黑体";
      }
      li:hover{
      background-color:#9B0000 ;
      }

    一种是竖着的与横着的都有的:

    HTML:

    <div class="nav1">
      <ul class="ul1">
      <li id="lione" style="220px; text-align: left">
      <a href="#">菜单一</a>
      <div class="nav2">
      <ul class="ul2">
      <li>
      <a href="#">菜单一</a>
      <div class="nav3">
      <a href="#"> 来点我!</a>
       
      </div>
      </li>
      <li>
      <a href="#">菜单二</a>
      <div class="nav3">菜单二</div>
      </li>
      <li>
      <a href="#">菜单三</a>
      <div class="nav3">菜单三</div>
      </li>
      </ul>
       
      </div>
       
      </li>
      <li><a href="#">菜单二</a></li>
      <li><a href="#">菜单三</a></li>
      <li><a href="#">菜单四</a></li>
      <li><a href="#">菜单五</a></li>
      <li><a href="#">菜单六</a></li>
      </ul>
       
      </div>
       

    CSS:

     div{
         border: 1px red solid;
     }

     ul{
         list-style:none
     }
    a{
        text-decoration: none;
    }
    .nav1{
            960px;
            height:40px;
            margin: 0 auto;
            border-radius:0px 8px 8px 0px;
            background-color: orangered;
    }

     .ul1 li{
           100px;
           height: 100%;
           float:left;
           text-align: center;
           line-height: 40px;
           }
    .ul1 li a{
        color: #fff;
        display: block;
        100%;
        height: 100%;
    }
    .ul1 li a:hover{
       background-color: #FFA500;
     }

    .nav2{
        220px;
        height: 300px;
        display: none;
        position: relative;
    }


    .ul2 li{
        float:none;
        background-color: #32CD32;
        100%;
        text-align: left;
    }

    #lione:hover .nav2{
         display: block;
    }


    .nav3{
        740px;
        height:300px;
        position: absolute;
        left:220px;
        top:0px;
        background-color: #7FFF00;
        border-radius:0px 8px 8px 0px ;
        display: none;
    }

    .ul2 li:hover .nav3{
        display: block;
    }

  • 相关阅读:
    JavaScript
    94.Binary Tree Inorder Traversal
    144.Binary Tree Preorder Traversal
    106.Construct Binary Tree from Inorder and Postorder Traversal
    105.Construct Binary Tree from Preorder and Inorder Traversal
    90.Subsets II
    78.Subsets
    83.Merge Sorted Array
    80.Remove Duplicates from Sorted Array II
    79.Word Search
  • 原文地址:https://www.cnblogs.com/hellokitty1/p/3984871.html
Copyright © 2011-2022 走看看