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>

  • 相关阅读:
    背景图
    PKUWC 2019~2020 游记
    前置内容2:复杂度分析
    前置内容1:算法与数据结构
    莫比乌斯反演学习笔记2
    莫比乌斯反演学习笔记1
    CSP-J&S-2019 游记
    最近面试的一些感触
    算法学习-整数反转
    入行九年,入园8年,突然想写一点东西.
  • 原文地址:https://www.cnblogs.com/zqld/p/6628869.html
Copyright © 2011-2022 走看看