<!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. mysql查询用，或#隔开的字段

    假如,user表有一字段 pids,pids字段是用#(实际用逗号合适)隔开的师傅id.现在查询师傅id:168的徒弟有哪些(徒弟.徒孙.徒孙的徒弟.徒孙的徒孙....) sql:  select * ...

  2. 爬虫——scrapy入门

    scrapy 安装scrapy pip install scrapy windows可能安装失败,需要先安装c++库或twisted,pip install twisted 创建项目 scrapy s ...

  3. maven与eclipse集成

    https://www.cnblogs.com/teach/p/5906425.html

  4. c#学习个人总结

    c#一门程序语言,我的专业课.有了一学期的接触对它的了解还只是皮毛,里面有许多的知识都有待了解学习和提高,熟练掌握程序的语法,能够熟练的调用,对于一些理论性的知识还需要今后更多的揣摩和研究,讲书本中的 ...

  5. centos7中安装pg数据库

    # centos中安装的命令 # yum install postgresql-server.x86_64 # 安装之前可以通过以下命令价差是否已经安装过 rpm -qa | grep postgre ...

  6. Resource Allocation of Yarn

    关键词:yarn 资源分配 mapreduce spark 简要指南 适合不想看太多原理细节直接上手用的人. 基本原则: container分配的内存不等于机器实际用掉的内存.NM给container ...

  7. 好大一个坑： EF Core 异步读取大字符串字段比同步慢100多倍

    这两天遇到一个奇怪的问题,通过 EF/EF Core 查询数据库速度奇慢,先是在传统的 ASP.NET 项目中遇到(用的是EF6.0),后来将该项目迁移至 ASP.NET Core 也是同样的问题(用 ...

  8. ping vs telnet, what is the difference between them and when to use which?

    Ping is an ICMP protocol. Basically any system with TCP/IP could respond to ICMP calls if they were ...

  9. iOS代码组件化--利用cocoaPods创建私有库

    如果项目模块多,模块间逻辑复杂,我们发现多个人同时维护一个代码仓库需要十分小心,一不小心,造成冲突,解决起来很烦,相信很多人都遇到手工删除合并的冲突的文件的经历. 如果利用组件化思想,每个人维护自己的 ...

  10. Android的SQlite的使用

    Android系统集成了一个轻量级的数据库:SQlite.SQlite不像Oracle.MySQl数据库那样需要安装.启动服务器进程,SQLite数据库只是一个文件 实例1:向数据库里插入数据 主界面 ...