微信扫一扫打赏支持

html5--6-57 阶段练习6-折叠导航栏

 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>

 

posted @ 2017-12-12 23:24  范仁义  阅读(582)  评论(0)    收藏  举报