5.折叠导航栏 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>折叠导航栏</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 300px;
            margin: 10px;
            /*float: left;*/
        }
        h3{
            background-color: rgba(180,80,30,0.8);
            padding: 5px;
            text-align: center;
            border-radius: 30px;
        }
        a{
            text-decoration: none;
        }
        h3+div{
            height: 0;
            overflow: hidden;/*溢出的部分隐藏*/
            transition: all 1s ease;/*设置动画效果*/
        }
        .div1:hover h3+div{
            height: 120px;
            overflow: auto;/*鼠标滑动后显示*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <h3><a href="">html5</a></h3>
        <div><img src="../image/img3.jpg"></div>
    </div>
    <div class="div1">
        <h3><a href="">css3</a></h3>
        <div><img src="../image/img3.jpg"></div>
    </div>
    <div class="div1">
        <h3><a href="">javascript</a></h3>
        <div><img src="../image/img3.jpg"></div>
    </div>
</body>
</html>

 

posted @ 2019-10-22 18:23  cjl2019  阅读(191)  评论(0)  编辑  收藏  举报