通过HTML+CSS实现折叠样式完整代码
教程管理员 发布于2023-10-04 08:29 HTML教程 206
简介:
通过HTML+CSS实现折叠样式完整代码
前言
通过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; }
相关推荐
- 03-24 高端几何风完整框架企业介绍Office PPT免费模板背景素材下载
- 03-24 喷墨艺术极简大气完整框架岗位竞聘Office PPT免费模板背景素材下载
- 03-18 完整框架扁平大气商业创业计划书Office PPT免费模板背景素材下载
- 03-14 完整框架商务风年终工作总结报告Office PPT免费模板背景素材下载
- 03-14 完整框架稳重蓝微立体商业计划书Office PPT免费模板背景素材下载
- 03-03 完整框架述职总结工作计划Office PPT免费模板背景素材下载
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序,Div和Table的区别
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-