html5 css折叠导航栏
<!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折叠导航栏的更多相关文章
- jquery侧边折叠导航栏制作,两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- 第8天:CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- Css之导航栏学习
Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335 官方例子:http://dev.sencha.com/ext/5.0.1 ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- HTML/CSS:导航栏水平和垂直
1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
随机推荐
- XXXXX,这个域名
相信大家也不会记得 因为我没续费 所以已经变成不可描述的XX片网站了 大家不要看了....QAQ
- Javascript Date类型
Date 类型使用自 UTC 1970 年 1 月 1日 午夜 开始经过的毫秒数来保存日期. 创建日期对象 var now = new Date();//获取当前日期 Date.parse ...
- python +ps 三方面库整理
-------------------------------------------端口进程相关------------------------------------------------cp ...
- js 讲解
substring() 取文本中间 split() 分割文本 charcodeat() utf-8 tolowercase() 小写 正则是一个对象 正则 i 不区分大小写 escape(s ...
- Multi-Projector Based Display Code ---- Download
The code providing are for your reference. Please download the code according to your hareware confi ...
- cmd中mysql主键id自增,在添加信息时发生错误,再次成功添加时,id已经跳过错误的信息继续自增。
id 自增,在往这个表里添加信息时 发生错误,再次添加 id数值已经跳过之前
- VMware+CentOS7学习记录
CentOS命令记录 1.su root 进入最高权限 2.cd /位置 即进入该文件 3.中文与英文之间的切换:win+空格 添加中文的步骤:https://blog.csdn.net ...
- LeetCode 653 Two Sum IV - Input is a BST 解题报告
题目要求 Given a Binary Search Tree and a target number, return true if there exist two elements in the ...
- js之history
浏览历史记录window.history,不会刷新页面内容,只会更改历史记录,用location.href 才会刷新 1. history.pushState() & history.repl ...
- Vue学习记录第一天
今天开始了Vue的学习,下面我就记录一下学习了什么. 1.什么是Vue? vue是一套基于javaScript的渐进式框架,是MVVM框架.View ——ViewModel——Model 其中Vie ...