<!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. Java菜鸟浅谈OCR

    什么是OCR? 粗暴点说就是图片文本识别!正规点的说法就是:(Optical Character Recognition,光学电子识别) 最近公司开展新项目,考虑到实名认证这方面,然后还要上传身份证正 ...

  2. Synergy简单使用小记

    需求: 两台笔记本用两套键盘鼠标,那体验,糟透了. 怎样才能使得两个主机公用一套鼠标和键盘呢?上网搜索到Synergy这款软件 参考: 具体使用方法参考了这篇博文 基本使用: 这款软件分为服务端和客户 ...

  3. VS2013使用滚动条缩略图、双击选中高亮、配色方案、代码竖虚线(缩进标尺)

    1.双击代码或选中代码高亮,用以下插件,反应很灵敏,我安装的是第三个 2.代码编辑器的滚动条缩略图是VS自带的,需要打开菜单----工具----选项,如下图设置: 3.VS默认的选中颜色,需要打开菜单 ...

  4. 全是Bug

    一.开始实现程序之前 1. 在文章开头给出结对使用的Github项目地址和结对伙伴的作业地址.(两个人使用同一个) 我的结对伙伴是 : 201731044205. 伙伴的作业地址: https://w ...

  5. JS_高程8.BOM window对象（1）

    1.全局作用域 var age = 14; window.coloer = "pink"; console.log(delete window.age);//false 使用var ...

  6. Resource Allocation of Yarn

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

  7. CSS3_3D 变换

    3D 变换 1. 在 2D 父元素中,绕轴旋转,效果需要想象 #ele_3d { width: transform: rotateX(2deg); } rotateX 为正,元素左上角往里跑...对象 ...

  8. WithOne 实体关系引起 EF Core 自动删除数据

    最近遇到了一个 EF Core 的恐怖问题,在添加数据时竟然会自动删除数据库中已存在的数据,经过追查发现是一个多余的实体关系配置引起的. modelBuilder.Entity<Question ...

  9. uwp 动画Storyboard

    代码如下: <Page.Resources>        <Storyboard x:Name="storyboard">            < ...

  10. Akka并发编程框架 -概念模型(Akka.net或者Orleans)

    Akka 来构建具备高容错性.可以横向扩展的分布式网络应用程序. Akka 通常是指一个强大的分布式工具集,用于协调远程计算资源来进行一些工作 Akka 工具集以及Actor 模型的介绍. Actor ...