前言

通过html+css实现折叠样式

一、实现思路

动态修改元素的高度，并添加过渡效果。

二、实现代码

html代码：

<div class="fold"><div class="child0">选项一</div><div class="child1">选项11</div><div class="child1">选项22</div><div class="child1">选项33</div><div class="child1">选项44</div></div>

css代码

.fold{width: 200px;height: 51px;transition: all 1s;overflow: hidden;text-align: center;line-height: 50px;background-color: transparent;color: white;border-radius: 5px;
}
.fold:hover{height: 258px;}
.child0{width: 200px;height: 50px;background-color: #409eff;border-radius: 5px;}.child1{width: 200px;height: 50px;border-top: 1px solid white;border-radius: 5px;background-color: #409eff;}

三、效果

css实现折叠样式实现相关推荐

Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
如何设计折叠样式的屏幕(类似ＭＩＧＯ的屏幕)
在sap的应用中,我们有时会需要设计折叠样式的屏幕(类似MIGO的屏幕),以缓解屏幕区域的太小的矛盾.折叠样式屏幕实现的基本原理是用子屏幕根据用户的输入调用不同的子屏幕来实现的.现在以放置两个子屏幕的 ...
php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解，使用CSS控制打印样式，需要设 - phpStudy...
jQuery实现区域打印功能代码详解使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
html怎么给变量添加样式,通过CSS变量修改样式
js怎么去修改css伪类样式呢?但是js并没有伪类选择器,那么该怎么办呢?网上有不少方法,比如通过切换元素的类.在style中动态插入新的样式等. 那么这里再来一种方法,设置css变量(var),通过 ...
net中 css 控制 GridView 样式
net中 css 控制 GridView 样式 .GridViewStyle { border-right: 2px solid #A7A6AA; border-bottom: ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...

css实现折叠样式实现

文章目录

前言

一、实现思路

二、实现代码

三、效果

css实现折叠样式实现相关推荐

最新文章

热门文章