zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    loaded some nib but the view outlet was not set
    指标评比
    IOS DEVELOP FOR DUMMIES
    软件测试题二
    javascript select
    DOM节点类型详解
    mysql操作
    UVA 10055
    solutions for 'No Suitable Driver Found For Jdbc'
    解决git中文乱码问题
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8030307.html
Copyright © 2011-2022 走看看