欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML5 >

《html5》html5交互元素的使用

Html5交互元素就是和用户进行互动的元素,和之前js控制效果不同,html5html增加了很多的交互元素,比如隐藏显示注脚就是其中的一个,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>

-->

</body>

</html>

注释的隐藏注脚,打开可以看到效果,实现的效果如下图

 

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-10-22 12:00 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。