这是补充HTML5基础知识的系列内容，其他如下。
在前一篇随笔的读书笔记《HTML5开发手册》 --figure、time、details、mark》中，介绍了语义化标签details。 如果你还不知道怎么用，请点击一下。 这次特别实战一下。
在HTML5之前，使用checked或target在纯CSS上实现手风琴效果是很常见的，但HTML5提供了细节元素，使手风琴能够堂堂正正地制作出来。
效果1:MAC版显示概要
使用过mac的学生应该对这个接口很熟悉。 因为这个接口和今天我们说的details有很多相近的地方。 首先，有折叠效果。 用户可以自己选择打开还是关闭。 接下来，当我们直接打开时，默认情况下会打开几个选项卡。 虽然有些是关闭的，但这些细节是可以实现的。
预览效果
代码结构
通用：
类型：便携式文稿格式(PDF )大小：121，765，394字节)磁盘上的121.8 MB )位置： /Users/yangyoucun/Desktop创建时间： 2013年7月17日星期三1117日
3: 1.5版页数： 722分辨率： 631 835安全： None编码软件： FreePic2Pdf - 1.26源： jiu的MacBook Pro名称和扩展名3360
评论：
开放方式：
预览(默认)
预览：
上面代码的HTML代码可以实现这种折叠效果。 添加一点CSS会产生不同的效果，完全不需要模拟实现。
另外，在我的代码中，我使用了table来表示上面的“更多信息”和“通用”列表，但实际上这不符合我的意思，所以这里使用了dl来表示说明列表。 也就是说，此列表的格式为“name-value”，它是摘要项目的说明，是一组元信息，因此使用dl
效果2 )手风琴效果
这种效果最常见，只需几行details代码就可以实现这一功能。
预览效果
代码结构
问题列表问题1
answeransweransweransweransweransweransweransweranswerans
第二季
answeransweransweransweransweransweransweransweranswerawer
第三季
answeransweransweransweransweransweransweransweransweransweranswerswer
第四季
answeransweransweransweransweransweransweransweransansweranswer
我们的折叠面板结构非常清晰，没有额外的元素节点，也没有JavaScript代码。 只有这样才能实现手风琴效果。
效果3 :典型文件程序卸载界面
这也是一个常用的APP应用场景，在程序安装和卸载过程中，我们一般会向用户展示具体的进度信息，细节一般会被隐藏起来，这个场景可以在details中完成
请看屏幕截图：
样式优化规则：
摘要文本前面的默认icon( ()的修饰通过以下方式执行：
//隐藏三角符号
详细摘要：-WebKit -详细信息- marker {
显示：无；
}
为了体验更好，需要几种风格：
萨默利
Outline :无； //1、拆下点击时的外框
用户- select : none； //2，不要点击选择
cursor: pointer； //3、鼠标悬停效果
}
摘要的状态可能与详细信息是否具有open属性有关。
详细信息[ open ] summary {
//展开时的摘要样式
color: red；
背景色：蓝色；
}
添加过渡和动画
在展开/收缩的过程中，我们仍然可以制作一些有趣的动画。 请注意，这里的动画主要指向内容区域中的动画。
HTML的结构如下。
第一个
Set the animation to r
un when details opencss部分如下：
@keyframes slideDown {
0% {
opacity: 0;
height: 0;
}
100% {
opacity: 1;
height: 20px;
}
}
details[open] > div {
animation: slideDown 1s linear both;
overflow:hidden;
}
总结
在实际项目中，有太多的场景是需要用户来操作显示/隐藏相关内容，这也是提高用户体验的一个过程，展示重点内容，把主动权交给用户。
对于这样的场景，details都可以发挥重要的内容。
JVM活学活用——调优工具
概述 工具做为图形化界面来展示更能直观的发现问题,另一方面一些耗费性能的分析(dump文件分析)一般也不会在生产直接分析,往往dump下来的文件达1G左右,人工分析效率较低,因此利用工具来分析jvm相 ...
pandas pivot_table 活学活用实例教程
pandas pivot_table 活学活用实例教程 导入相关数据分析的库 首先进行commentTime时间进行数据预处理 查看数据类型信息 最简单的透视表 直接敲击该函数,在notebook中可 ...
活学活用，webapi HTTPBasicAuthorize搭建小型云应用的实践
HTTP使用BASIC认证,WebAPI使用[HTTPBasicAuthorize]标记控制器就是使用了BASIC认证. BASIC认证的缺点HTTP基本认证的目标是提供简单的用户验证功能,其认证过程 ...
JVM活学活用——类加载机制
类的实例化过程 有父类的情况 1. 加载父类静态 1.1 为静态属性分配存储空间并赋初始值 1.2 执行静态初始化块和静态初始化语句(从上至下) 2. 加载子类静态 2.1 为静态 ...
JVM活学活用——优化springboot
介绍 在SpringBoot的Web项目中,默认采用的是内置Tomcat,当然也可以配置支持内置的jetty,内置有什么好处呢? 1. 方便微服务部署. 2. 方便项目启动,不需要下载Tomcat或者 ...
活学活用wxPython基础框架
看活活用wxpython这本书,基本框架是这样子的,这里有定义输出,然后打印出整个流程,可以看到是怎样执行的,明天请假了,五一回去玩几天,哈哈,估计假期过来都忘了 import wx import s ...
JVM活学活用——GC算法 垃圾收集器
概述 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. jvm 中,程序计数器.虚拟机栈.本地方 ...
JVM活学活用——Jvm内存结构
Java内存结构: JVM内存结构主要是有三大块:堆内存.方法区和栈.堆内存是JVM中最大的一块由年轻代和老年代组成,而年轻代内存又被分为三部分,Eden空间.From Survivor空间.To S ...
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
随机推荐
nodejs的child_process同步异步
nodejs是一种单线程模型,但是,使用nodejs的child_process模块可以实现多进程任务.利用child_process可以创建子进程,实现子进程和主进程之间的通信. nodejs v0 ...
[C语言 - 4] 指针
存放变量地址的变量 int a = 1; int *p; p = &a; 在64位系统中,占用8个字节 直接引用 间接引用 *p : 指针指向的变量的值 不要使用未初始化的指针 1 ...
XML概要
早在两年前,我一直听说XML,但是,只是没有时间去研究它.也不知道它的作用,花了一些时间最近几天来学习他们的语言.是XML的一些简介希望能对各位同学有所帮助: XML是eXtensible Ma ...
设计模式(1)单例模式(Singleton)
设计模式(0)简单工厂模式 源码地址 0 单例模式简介 0.0 单例模式定义 单例模式是GOF二十三中经典设计模式的简单常用的一种设计模式,单例模式的基本结构需满足以下要求. 单例模式的核心结构只有一 ...
usaco training 4.1.2 Fence Rails 题解
Fence Rails题解 Burch, Kolstad, and Schrijvers Farmer John is trying to erect a fence around part of h ...
css 子div自适应父div高度