zoukankan      html  css  js  c++  java
  • html5 css折叠导航栏

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>旋转菜单</title>
        <link rel="stylesheet" href="style8.css" type="text/css">
    </head>
    <body>
    <div class="se">
    <h3><a href="">IT</a></h3>
    <div><img src="imges/it.jpg" alt=""></div>    
    </div>

    <div class="se">
    <h3><a href="">创投</a></h3>
    <div><img src="imges/kk.jpg" alt=""></div>    
    </div>

    <div class="se">
    <h3><a href="">探索</a></h3>
    <div><img src="imges/dd.jpg" alt=""></div>    
    </div>
    </body>
    </html>

    img{
         500px;
        height: 345px;
    }
    *{
        margin: 0;
        padding: 0;

    }
    h3+div{
        height: 0px;
        overflow: hidden;
        transform: all 1s ease;
    }
    a{
        text-decoration: none;
    }
    .se{
         300px;
        background: rgba(180,60,30,0.3);
        margin-top: 5px;
        margin-left: 20px;
        float: left;
    }
    h3{
        background: rgba(180,80,30,0.8);
        padding: 5px 25px;
        border-radius: 20px;
    }
    .se:hover h3+div{
    height: 345px;
    overflow: auto;
    }

    天道酬勤,厚积薄发。 君子之行,静以修身,俭以养德。 非淡泊无以明志,非宁静无以致远。 如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。
  • 相关阅读:
    【Angular2】ng2的开始_组件
    【js框架】随笔
    【sublime text3】个性化定制
    PLSQL中文乱码问题
    Microsoft office 2010密钥
    node_oracle连接
    oracle安装配置
    Logging in Java
    Java 基础
    Hibernate
  • 原文地址:https://www.cnblogs.com/houweidong/p/9752973.html
Copyright © 2011-2022 走看看