<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转菜单</title>
    <link rel="stylesheet" href="style8.css" type="text/css">
</head>
<body>
<div class="se">
<h3><a href="">IT</a></h3>
<div><img src="imges/it.jpg" alt=""></div>    
</div>

<div class="se">
<h3><a href="">创投</a></h3>
<div><img src="imges/kk.jpg" alt=""></div>    
</div>

<div class="se">
<h3><a href="">探索</a></h3>
<div><img src="imges/dd.jpg" alt=""></div>    
</div>
</body>
</html>

img{
    width: 500px;
    height: 345px;
}
*{
    margin: 0;
    padding: 0;

}
h3+div{
    height: 0px;
    overflow: hidden;
    transform: all 1s ease;
}
a{
    text-decoration: none;
}
.se{
    width: 300px;
    background: rgba(180,60,30,0.3);
    margin-top: 5px;
    margin-left: 20px;
    float: left;
}
h3{
    background: rgba(180,80,30,0.8);
    padding: 5px 25px;
    border-radius: 20px;
}
.se:hover h3+div{
height: 345px;
overflow: auto;
}

html5 css折叠导航栏的更多相关文章

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

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

  2. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  4. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  5. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...

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

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

  7. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. HTML/CSS：导航栏水平和垂直

    1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...

  9. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. css变量使用

    CSS中的变量给了我们诸多优点:方便.代码重用.更可靠的代码库和提升防错能力.(此句转) 变量虽好用,但是兼容是在不怎么样:点这里查看. 一.变量的声明 :root { --base-font-siz ...

  2. Django实例

    更新:今年8月在深圳和嵩天老师居然见面了,很开心.嵩天老师很和蔼. =========== 今天看了嵩天老师的视频,感觉讲的很好,于是看着视频自己做了一个初步的实例认识. 步骤1,新建一个Web框架 ...

  3. VB中Winsock连续发送出现接收不到的异常问题解决方法

    VB里面用WINSOCK进行一对多连接的TCP连接时,经常需要群发消息给所有已连接的客户端.代码类似如下: Option Explicit Dim bytMsg() As Byte Private S ...

  4. Ganglia 调试技巧

    转自:http://blog.csdn.net/xxd851116/article/details/25109043 Gmond # 检查Gmond服务是否正在运行,发出如下命令:ps aux | g ...

  5. (62)Wangdao.com第十天_JavaScript 变量的作用域

    在 js 中有两种作用域:全局作用域,局部作用域. 全局作用域 直接写在 <script> 标签中的变量和方法. 在网页打开时创建,在网页关闭时销毁. 全局作用域有一个全局对象 windo ...

  6. scrapy入门使用

    scrapy入门 创建一个scrapy项目 scrapy startporject mySpider 生产一个爬虫 scrapy genspider itcast "itcast.cn&qu ...

  7. Selenium 3----鼠标、键盘操作常用方法

    [鼠标] 在 WebDriver 中, 关于鼠标操作的方法封装在 ActionChains 类中. ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 Action ...

  8. Java+面向对象初学感想

    在先导课之前我未曾接触C和Python之外的语言,在大一学年的课程中,用面向过程的思想方法足以完成绝大多数课程要求,故而我也对面向对象的编程思想知之甚少,虽然多有耳闻但是对它一直没有一个正式的学习了解 ...

  9. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  10. 消除 ASP.NET Core 告警 "No XML encryptor configured. Key may be persisted to storage in unencrypted form"

    在 ASP.NET Core 中如果在 DataProtection 中使用了 PersistKeysToFileSystem 或 PersistKeysToFileSystem services.A ...