zoukankan      html  css  js  c++  java
  • CSS:导航栏下拉菜单模板

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                
                *{
                    margin:0px;
                    padding: 0px;
                }

                .nav{
                     500px;
                    height: 46px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    z-index: 900;
                }
                .nav-title{
                     100px;
                    max-height: 46px;
                    text-align: center;
                    line-height: 46px;
                    float:left;
                    background-color: #018b3e;
                    font-size: 20px;
                    overflow: hidden;
                    transition: 0.5s;
                }
                .nav-title:hover{
                    background-color:#ff6b00;
                    cursor: pointer;
                    max-height: 500px;                
                }
                .nav-title ul{
                    list-style:none;
                }
                .nav-title li{
                    background-color:red;
                }
                .nav-title li:hover{
                    cursor: pointer;
                    background-color:rosybrown;
                }
                .content{
                     500px;
                    height: 500px;
                    margin-top: 46px;
                    position: absolute;
                    background-color: cornflowerblue;
                }
            </style>
        </head>
        <body>
            <div class="nav">
                <div class="nav-title">FF
                    <ul>
                        <li>div</li>
                        <li>span</li>
                        <li>img</li>
                        <li>pr</li>
                        <li>body</li>
                    </ul>
                </div>
                <div class="nav-title">HTML
                    <ul>
                        <li>div</li>
                        <li>span</li>                    
                    </ul>
                </div>
                <div class="nav-title">CSS
                    <ul>
                        <li>div</li>
                        <li>span</li>
                        <li>img</li>                    
                    </ul>
                </div>
                <div class="nav-title">.NET
                    <ul>
                        <li>div</li>                    
                    </ul>
                </div>
                <div class="nav-title">JAVASCRIPT
                    <ul>
                        <li>div</li>
                        <li>span</li>
                        <li>img</li>
                        <li>pr</li>                    
                    </ul>
                </div>
            </div>
            <div class="content">
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>    
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
                12334556667<br>
            </div>
        </body>
    </html>

  • 相关阅读:
    软件需求阅读笔记二
    寒假小程序开发记录2
    软件需求阅读笔记一
    寒假小程序开发记录1
    软件工程概论课个人总结
    06大道至简阅读笔记
    golang算法——leetcode-46
    实验 5 Spark SQL 编程初级实践
    scala链接数据库Exception in thread "main" java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
    Error:(15, 103) value toDF is not a member of org.apache.spark.rdd.RDD[Employee] .map(attributes => Employee(attributes(0).trim.toInt, attributes(1), attributes(2).trim.toInt)).toDF()
  • 原文地址:https://www.cnblogs.com/cmzhphp2017/p/7640939.html
Copyright © 2011-2022 走看看