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

实例

 @charset="UTF-8";

 *{

     margin:;

     padding:;

 }

 h3+div{

     height:;

     overflow: hidden;

     transition: all 1s ease;

 }

 a{

     text-decoration: none;

 }

 .se{

     width: 200px;

     float: left;

     background: rgba(180,60,30,0.3);

     margin-top:3px;

     margin-left: 20px;

 }

 h3{

     background: rgba(180,80,30,0.8);

     padding: 5px 25px;

     border-radius: 20px;

 }

 .se:hover h3+div {

     height: 350px;

     overflow: auto;

 }
 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>折叠导航栏</title>

     <link rel="stylesheet" type="text/css" href="but.css">

 </head>

 <body>

     <div class="se">

         <h3><a href="">IT</a></h3>

         <div><img src="../img/IT.png" alt=""></div>

     </div>

     <div class="se">

         <h3><a href="">创投</a></h3>

         <div><img src="../img/创投.png" alt=""></div>

     </div>

     <div class="se">

         <h3><a href="">探索</a></h3>

         <div><img src="../img/探索.png" alt=""></div>

     </div>

 </body>

 </html>

html5--6-57 阶段练习6-折叠导航栏的更多相关文章

  1. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  2. [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335 官方例子:http://dev.sencha.com/ext/5.0.1 ...

  3. html5 css折叠导航栏

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  5. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  6. ElementUI+命名视图实现复杂顶部和左侧导航栏

    在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...

  7. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  8. html5--6-51 阶段练习3-旋转导航

    html5--6-51 阶段练习3-旋转导航 @charset="UTF-8"; ul{ list-style: none; font-size:24px; font-weight ...

  9. 前端（各种demo）：右侧导航栏的折叠和打开（不使用js）基础版和升级版

    1.给div设置定位. 复习一下—— css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed: ...

随机推荐

  1. Delphi中的操作二进制文件的两个重要函数

    Delphi中的操作二进制文件的两个重要函数 对于通过Byte数组进行文件操作的,在FTP中经常会使用到,我也是在Delphi调用Web Service进行文件的上传和下载时找到这两个函数的,挺好用的 ...

  2. (9)C#连mysql

    1官网下载 dll 2. using MySql.Data.MySqlClient; 3. <add key="con_MES" value="server=192 ...

  3. [Bzoj1112][POI2008]砖块Klo（splay）

    1112: [POI2008]砖块Klo Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2353  Solved: 831[Submit][Statu ...

  4. noip2009提高组解题报告

    NOIP2009潜伏者 题目描述 R 国和S 国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动. 历尽艰险后,潜伏于 S 国的R 国间谍小C 终于摸清了S 国军用密码的编码规则: 1． S 国 ...

  5. 洛谷 P1710 地铁涨价

    题目背景 本题开O2优化,请注意常数 题目描述 博艾市除了有海底高铁连接中国大陆.台湾与日本,市区里也有很成熟的轨道交通系统.我们可以认为博艾地铁系统是一个无向连通图.博艾有N个地铁站,同时有M小段地 ...

  6. systemtap初体验

    https://phpor.net/blog/post/3471 写在前面: systemtap依赖的debuginfo可以从这里(http://debuginfo.centos.org/6/x86_ ...

  7. java验证身份证号码是否有效源代码 wn25的头像 wn25 23 2015-01-04 20:09 6 基本信息 Java × 1 浏览

    原文:http://www.open-open.com/code/view/1420373343171 1.描述 用java语言判断身份证号码是否有效,地区码.出身年月.校验码等验证算法 2.源代码 ...

  8. 十步叫你如何无损修复硬盘锁（mbr病毒）

    经常看见有人被锁硬盘  开机以后出现一行红字 FUCK  YOU POJIEZHE  等等云云的 这个问题主要还是病毒对Mbr分区的修改造成的 下面我教给大家一个无损数据   无损硬盘  无需重装系统 ...

  9. sklearn 特征选择

    1.移除低方差的特征(Removing features with low variance) VarianceThreshold 是特征选择中的一项基本方法.它会移除所有方差不满足阈值的特征.默认设 ...

  10. Solidworks如何绘制文字

    1 新建草图,并点击工具-草图绘制实体,文本   2 在弹出的窗口中输入文字,并设置文字的字体和样式   3 画好之后效果如下图所示   4 使用拉伸或者拉升切除来得到凸面的文字或者凹面的文字.   ...