zoukankan      html  css  js  c++  java
  • 【案例】米柚导航条实现

    <!DOCTYPE html>

    <html lang="en">

    <head>

            <meta charset="UTF-8">

            <title>米柚导航条</title>

            <style>

                     *{

                             margin: 0;

                             padding: 0;

                     }

                     li{

                             list-style: none;

                     }

                     a{

                             text-decoration: none;

                     }

                     #container{

                             100%;

                             height: 48px;

                             background: #FD6440;

                             margin-top:120px;

                     }

                     #container>#nav{

                             980px;

                             height: 48px;

                             margin: 0 auto;

                     }

                     #container>#nav>ul>li{

                             float: left;

                             height: 48px;

                             line-height: 48px;

                     }

                     #container>#nav>ul>li:hover{

                             background: #f75733;

                     }

                     #container>#nav>ul>li.active{

                             background: #f75733;

                     }

                     #container>#nav>ul>li>a{

                             font-size: 14px;

                             height: 48px;

                             color: #fff;

                             display:block;

                             padding: 0 16px;

                     }

            </style>

    </head>

    <body>

            <div id="container">

                     <div id="nav">

                             <ul id="lists">

                                      <li><a href="">首页</a></li>

                                      <li><a href="">新帖</a></li>

                                      <li><a href="">版块</a></li>

                                      <li><a href="">MIUI专区</a></li>

                                      <li class="active"><a href="">资源分享</a></li>

                                      <li><a href="">谈天说地</a></li>

                                      <li><a href="">俱乐部</a></li>

                                      <li><a href="">MIUI下载</a></li>

                                      <li><a href="">论坛APP</a></li>

                             </ul>

                     </div>

            </div>

    </body>

    </html>

  • 相关阅读:
    使用JQuery实现延迟加载UserControl
    VisualStudio中的列选择
    SQL SERVER 2008 CTE生成结点的FullPath
    woocommerce独立站建站
    Java NIO使用及原理分析(二)
    java.io学习总结 转载
    java io与装饰器模式
    函数式思维: 不变性
    函数式思维: 运用函数式思维,第2 部分
    maven添加非官方jar包到本地库(maven: install an external jar into local maven repository)
  • 原文地址:https://www.cnblogs.com/sherryStudy/p/miui_navbar.html
Copyright © 2011-2022 走看看