Html5交互元素就是和用户进行互动的元素,和之前js控制效果不同,html5比html增加了很多的交互元素,比如隐藏显示注脚就是其中的一个,divcss5小编给你用案列分享一下注脚交互元素。
<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>交互元素<details>的使用</title>
       <style type="text/css">
              body{
                     font-size: 12px;
              }
              span{
                     font-weight: bold;
              }
              details{
                     overflow: hidden;
                     height: 0;
                     padding-left: 200px;
                     position: relative;
                     display: block;
              }
              details[open]{
                     height: auto;
              }
       </style>
</head>
<body>
       <span>隐藏脚注</span>
       <details open="open">
              本页面生成于 2016-010-21
       </details>
       <!--<span>显示注脚</span>
       本页面生成于 2016-010-21
       <details open="open">
       </details>
-->
</html>
注释的隐藏注脚,打开可以看到效果,实现的效果如下图

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h13414.shtml








