HTML网页自定义标记DL、DT、DD的使用
时间:2009-9-18 13:44:16 来源:编辑整理 作者:webmaster - - 使用DL、DT、DD自定义标记来实现一些列表等展示,有时候会非常方便,下面看下吧。 <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition description”,定义描述)创建的。<dt>给出了术语名,<dd>标记给出了术语的定义。 一个定义列表中可以有多个术语名对应同一个给出的定义,也可有多重定义对应于一个术语名。同时也可以只给出术语名称而不对应定义,反之亦然。当然,这种结构往往并无实际意义,我们可以通过样式表,很轻松的实现这3个标记所达到的效果。 下面是一个例子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <style type="text/css"> <!-- dl { background-color:#000;color:#fff;width:100px;} dt { cursor:pointer;width:100%;background-color:#666;} .expand { overflow:visible;} .collapse { height:16px;overflow:hidden;} //--> </style> <script language="JavaScript" type="text/javascript"> <!-- function toggleDl(dt){ var dl=dt.parentNode; if("collapse"==dl.className)dl.className="expand"; else dl.className="collapse"; } //--> </script> </head> <body> <dl> <dt onclick="toggleDl(this)">根结点</dt> <dd>子结点1</dd> <dd>子结点2</dd> <dd>子结点3</dd> <dd>子结点4</dd> </dl> </body> </html> |
|