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;
    }

    天道酬勤,厚积薄发。 君子之行,静以修身,俭以养德。 非淡泊无以明志,非宁静无以致远。 如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。
  • 相关阅读:
    求最大子数组和
    第四周学习进度
    四则运算3
    实用工具箱app开发日记5
    实用工具箱app开发日记4
    实用工具箱app开发日记3
    实用工具箱app开发日记2
    实用工具箱app开发日记1
    《软件需求与分析》阅读笔记
    软件需求分析--阅读笔记3
  • 原文地址:https://www.cnblogs.com/houweidong/p/9752973.html
Copyright © 2011-2022 走看看