zoukankan      html  css  js  c++  java
  • HTML5--》details

    <details>是HTML5的新标签,用于描述文档或文档某个部分的细节。

    目前只有 Chrome 和 Safari 6 支持 <details> 标签。

    与 <summary> 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

    值:

    open:值为open,功能是定义details是否可见

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>交互元素details元素的使用</title>
     6 <style type="text/css" >
     7 body{font-size:12px;}
     8 span{font-weight:bold;}
     9 details{
    10     overflow:hidden;
    11     height:0;
    12     padding-left:200px;
    13     position:relative;
    14     display:block;
    15     }
    16 details[open]{height:auto;}
    17 </style>
    18 </head>
    19 
    20 <body>
    21 <span>隐藏</span>
    22 <details>
    23 <summary>我的网站</summary>
    24 www.calamus.cn
    25 </details>
    26 <span>显示</span>
    27 <details open="open">
    28 <summary>我的网站</summary>
    29 www.calamus.cn
    30 </details>
    31 </body>
    32 </html>

              chrome下的效果图

  • 相关阅读:
    @atcoder
    @loj
    @AGC037
    @uoj
    @uoj
    @loj
    @loj
    @loj
    @loj
    @loj
  • 原文地址:https://www.cnblogs.com/calamus/p/5472277.html
Copyright © 2011-2022 走看看