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>

  • 相关阅读:
    使用AOP 实现Redis缓存注解,支持SPEL
    springmvc 双亲上下文导致的 No mapping found for HTTP request
    调用iframe 中的js[兼容各种浏览器]
    NIO学习:异步IO实例
    byte数组与对象之间的相互转换
    NIO学习:buffer读入与写出(文件复制示例)
    NIO学习:使用Channel、Buffer写入文件
    使用摘要流获取文件的MD5
    ActiveMQ入门实例
    获取java项目 classpath目录
  • 原文地址:https://www.cnblogs.com/sherryStudy/p/miui_navbar.html
Copyright © 2011-2022 走看看