html5--6-57 阶段练习6-折叠导航栏
实例
1 @charset="UTF-8";
2
3 *{
4 margin:0;
5 padding:0;
6 }
7
8 h3+div{
9 height: 0;
10 overflow: hidden;
11 transition: all 1s ease;
12 }
13
14 a{
15 text-decoration: none;
16 }
17
18 .se{
19 width: 200px;
20 float: left;
21 background: rgba(180,60,30,0.3);
22 margin-top:3px;
23 margin-left: 20px;
24 }
25
26 h3{
27 background: rgba(180,80,30,0.8);
28 padding: 5px 25px;
29 border-radius: 20px;
30 }
31
32 .se:hover h3+div {
33 height: 350px;
34 overflow: auto;
35 }
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>折叠导航栏</title>
6 <link rel="stylesheet" type="text/css" href="but.css">
7 </head>
8 <body>
9 <div class="se">
10 <h3><a href="">IT</a></h3>
11 <div><img src="../img/IT.png" alt=""></div>
12 </div>
13 <div class="se">
14 <h3><a href="">创投</a></h3>
15 <div><img src="../img/创投.png" alt=""></div>
16 </div>
17 <div class="se">
18 <h3><a href="">探索</a></h3>
19 <div><img src="../img/探索.png" alt=""></div>
20 </div>
21 </body>
22 </html>
