zoukankan      html  css  js  c++  java
  • CSS下拉 菜单3.27第一次

    <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    * {
    margin: 0px;
    padding: 0px;
    list-style:none;/*取消样式,序号*/
    font-family: "微软雅黑";
    /* text-shadow: #0000FF 5px 5px;*/
    font-size:40px;/*字体大小
    */
    }

    .top-container {
    100%;
    height: 40px;
    background-color: #66AFE9;
    }

    .top-nav {
    600px;
    height: 40px;
    margin: 0px auto; /*居中*/
    background-color: chartreuse;
    }

    .nav-btn-lv1 {
    150px; /*分成4份*/
    max-height: 40px;
    background-color: burlywood;
    float: left; /*流水布局*/
    text-align: center;/*中间居中
    */ /*行高*/
    line-height: 40px;/*行高跟顶上一样高
    */ overflow: hidden;/*超出部分隐藏*/
    }
    .nav-btn-lv1:hover{

    max-height: 400px;/*鼠标小手*/

    transition: 1s;/*过渡效果*/

    cursor: pointer;/*鼠标小手*/
    }
    .nav-btn-lv1 li:hover{
    background-color: yellow;
    /* text-decoration: underline;*/
    }
    .nav-btn-lv1 ul{
    opacity: 0.5;/*透明*/
    }
    .top-nav,.nav-btn-lv1{
    border-radius: 10px; /*圆角*/
    }
    </style>
    </head>

    <body>
    <div class="top-container">
    <div class="top-nav">
    <div class="nav-btn-lv1">导航1
    <ul>
    <li>导航A</li>
    <li>导航B</li>
    <li>导航C</li>
    <li>导航D</li>
    </ul>
    </div>
    <div class="nav-btn-lv1">导航2
    <ul>
    <li>导航A</li>
    <li>导航B</li>
    <li>导航C</li>
    <li>导航D</li>
    </ul>
    </div>
    <div class="nav-btn-lv1">导航3
    <ul>
    <li>导航A</li>
    <li>导航B</li>
    <li>导航C</li>

    </ul>
    </div>
    <div class="nav-btn-lv1">导航4
    <ul>
    <li>导航A</li>
    <li>导航B</li>

    </ul>
    </div>
    </div>
    </div>
    </body>

    </html>

  • 相关阅读:
    强大的Resharp插件
    配置SPARK 2.3.0 默认使用 PYTHON3
    python3 数据库操作
    python3 学习中的遇到一些难点
    log4j的一个模板分析
    MYSQL内连接,外连接,左连接,右连接
    rabbitmq实战记录
    领域模型分析
    分布式系统学习笔记
    阿里开发规范 注意事项
  • 原文地址:https://www.cnblogs.com/zqld/p/6628869.html
Copyright © 2011-2022 走看看