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. *LOJ#2322. 「清华集训 2017」Hello world!

    $n \leq 50000$的树,有点权$\leq 1e13$,$q \leq 400000$次操作,有两种操作:从$s$跳到$t$每次$k$步,不到$k$步直接跳到$t$,每次把经过的点取根号:同样 ...

  2. centos 7 配置多个IP地址

    centos 7 配置多个IP地址 #打开网络配置文件 cd /etc/sysconfig/network-scripts/ vim ifcfg-eno167 找到IPADDR的位置,在下面再增加需要 ...

  3. D3拖动效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. npm start 修改启动端口的不同方式

    antd的启动配置文件基于package.json文件,配合roadhog使用时,启动配置是: "scripts": { "start": "road ...

  5. js Math [ 随机数、绝对值、四舍五入、进一取整、舍去取整、最大值、最小值、圆周率 ]

    <script> /* 数学对象:Math */ with (document) { write('<br>-3.5的绝对值:'+Math.abs(-3.5)); write( ...

  6. HUNAN 11562 The Triangle Division of the Convex Polygon(大卡特兰数)

    http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11562&courseid=0 求n边形分解成三角形的 ...

  7. linux crontab 定时器

    crontab -e 编辑定时器 crontab -l 显示当前定时器 crontab -r 删除当前定时器 格式 * * * * * command 第一列表示分钟1-59 第二列表示小时1-23 ...

  8. Intent传递简单对象与集合

    我们在Intent传递传递对象.能够有三种方式,实现Serializable接口.实现Parcelable接口,使用json格式序列化与反序列化. 在此我们使用第二方式,现实Parcelable接口, ...

  9. 创建一个简单的 http 服务器

    创建一个简单的 http 服务器 直接在 目录下运行 当前的目录即可是root 目录 默认端口8000 应该可以加参数修改端口号 Python2 python -m SimpleHTTPServer ...

  10. 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题或禁止第一次加载

    ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数: 当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...