zoukankan      html  css  js  c++  java
  • css导行下拉动画

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>daohangtexiao</title>
    <style>
       *{
         margin:0px;
         padding:0px;
         list-style:none;     /*列表序列号设置为没有*/
         font-family:"微软雅黑";
         }
    .top-container{
        100%;
        height:40px;
        background-color:#6FF;
        }
    .top-dao{
        500px;
        height:40px;
        margin:0px auto; /*  居中*/
        }
    .top-dao-1v1{
        max-height:40px;
        100px;
        text-align:center;  /*文字水平居中*/
        line-height:40px;        /*字体行高*/
        overflow:hidden;    /*隐藏DIV*/
        float:left;       /*流动而已左对齐*/
        background-color:#FF9;
       }
       .top-dao-1v1 ul{
         opacity:0.5;     /*透明度设置*/
        }
    .top-dao-1v1 .top-dao{
         border-radius:10px; /*边角设置为圆弧*/
        }
    .top-dao-1v1:hover{
         max-height:400px;
         cursor: pointer; /* 鼠标小手*/
         transition:1s; /* 过渡效果设置*/
        }
        .top-dao-1v1 li:hover{
             
            background: linear-gradient(to right, red , blue);/* 色彩过渡*/
            }
    </style>



    </head>


    <body>
    <div class="top-container">
        <div class="top-dao">
            <div class="top-dao-1v1">坑
                <ul>
                    <li>坑1</li>
                    <li>坑1</li>
                    <li>坑1</li>
                    <li>坑1</li>
                    <li>坑1</li>
                </ul>
            </div>
            <div class="top-dao-1v1">深坑
                <ul>
                    <li>坑1</li>
                    <li>坑1</li>
                    <li>坑1</li>
                </ul>
              </div>
            <div class="top-dao-1v1">很坑
                <ul>
                    <li>很坑1</li>
                    <li>很坑1</li>
                    <li>很坑1</li>
                    <li>很坑1</li>
                </ul>
              </div>
            <div class="top-dao-1v1">坑点
                <ul>
                    <li>坑点1</li>
                </ul>
            </div>
            <div class="top-dao-1v1">就是坑
                <ul>
                    <li>就是坑1</li>
                    <li>就是坑1</li>
                    
                </ul>
            </div>
        </div>
    </div>





    </body>

  • 相关阅读:
    nltk的使用
    TF-IDF原理及使用
    Python Join
    pandas 常用清洗数据(三)排序,去重
    pandas 常用清洗数据(二)
    pandas 常用清洗数据(一)
    Python 测试
    【Python学习之三】流程控制语句
    【Python学习之二】Python基础语法
    【Python学习之一】Python安装、IDE安装配置
  • 原文地址:https://www.cnblogs.com/yi11/p/6627959.html
Copyright © 2011-2022 走看看