|
HTML網(wǎng)頁自定義標(biāo)記DL、DT、DD的使用
時(shí)間:2009-9-18 13:44:16 來源:編輯整理 作者:webmaster - - 使用DL、DT、DD自定義標(biāo)記來實(shí)現(xiàn)一些列表等展示，有時(shí)候會非常方便，下面看下吧。 <dl>標(biāo)記定義了一個(gè)定義列表，定義列表中的條目是通過使用<dt>標(biāo)記(“definition title”，定義標(biāo)題)和<dd>標(biāo)記(“definition description”，定義描述)創(chuàng)建的。<dt>給出了術(shù)語名，<dd>標(biāo)記給出了術(shù)語的定義。 一個(gè)定義列表中可以有多個(gè)術(shù)語名對應(yīng)同一個(gè)給出的定義，也可有多重定義對應(yīng)于一個(gè)術(shù)語名。同時(shí)也可以只給出術(shù)語名稱而不對應(yīng)定義，反之亦然。當(dāng)然，這種結(jié)構(gòu)往往并無實(shí)際意義，我們可以通過樣式表，很輕松的實(shí)現(xiàn)這3個(gè)標(biāo)記所達(dá)到的效果。 下面是一個(gè)例子： <!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)">根結(jié)點(diǎn)</dt> <dd>子結(jié)點(diǎn)1</dd> <dd>子結(jié)點(diǎn)2</dd> <dd>子結(jié)點(diǎn)3</dd> <dd>子結(jié)點(diǎn)4</dd> </dl> </body> </html> 文章來自學(xué)IT網(wǎng)：http://www./html/2009-09/36_4562_00.html
|
|
|
