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. elasticsearch入门使用（四） 索引、安装IK分词器及增删改查数据

    一.查看.创建索引 创建一个名字为user索引: curl -X PUT 'localhost:9200/stu' {"acknowledged":true,"shard ...

  2. Codeforces Round #511 (Div. 2) C. Enlarge GCD

    题目链接 题目就是找每个数的最小素因子,然后递归除,本来没啥问题,结果今天又学习了个新坑点. 我交了题后,疯狂CE,我以为爆内存,结果是,我对全局数组赋值, 如果直接赋值,会直接在exe内产生内存,否 ...

  3. poj 3461 hash解法

    字符串hash https://blog.csdn.net/pengwill97/article/details/80879387 https://blog.csdn.net/chaiwenjun00 ...

  4. slf4j 搭配 log4j2 处理日志

    目录 关于 log4j 关于 slf4j 案例使用 关于 log4j Log4j + Slf4j 的使用组合最为常见,但是我们知道 Log4j 目前已经停止更新了.Apache推出了新的 Log4j2 ...

  5. Maven自动部署（SCM-SVN/Git）（maven-scm-plugin/maven-release-plugin插件的使用）

    以下内容引用自https://ayayui.gitbooks.io/tutorialspoint-maven/content/book/maven_deployment_automation.html ...

  6. 使用MVP模式重构代码

    之前写了两篇关于MVP模式的文章,主要讲得都是一些概念,这里谈谈自己在Android项目中使用MVP模式的真实感受,并以实例的形式一起尝试来使用MVP模式去重构我们现有的代码. 有兴趣的童鞋可以先去阅 ...

  7. cart树剪枝

    当前子树的损失函数: $C_a(T) = C(T) + a|T|$, 其中$C(T)$为对训练数据的预测误差,$|T|$为树的叶子结点数目,反映模型的复杂度.对固定的$a$,一定存在使损失函数$C_a ...

  8. TraceTool 跟踪工具的瑞士军刀（C++版使用）

    TraceTool查看器能够显示多种类型的来源(从提供的框架.日志文件.事件日志.或者OutputDebugString方法).一个简单而强大的client框架发送简单的跟踪,分组跟踪.类和对象浏览器 ...

  9. [原创] 在线音乐API的研究 (Part 2.1)

    最近,在优化一个自己写的音乐播放器.主要目的是回顾.归纳,并希望能够写出一个属于自己的common lib.今天,主要是关于在线音乐API的一些分析结果.此次,主要分析的是歌词.专辑部分.在线搜索音乐 ...

  10. Arcgis Engine（ae）接口详解（4）：featureClass的feature插入

    //由于测试数据不完善,featureClass在此要只设null值,真实功能要设实际的值 IFeatureClass featureClass = null; //获取某个字段的索引,后面取字段值用 ...