自定义列表组标签--DL[学网页网]

当前位置：学网页网 >> 网页制作 >> HTML语法 >> 正文

html 自定义列表组标签--DL

自定义列表组标签--DL

作者:qwxren 来源:学网页网录入:qwxren 更新时间:2008-9-27 23:19:16 点击数:

今日随意翻了一下《网页制作完全参考手册》发现一个以前没大用过的标签--DL。也就是HTML自定义列表标签。

学34A网T93页23o24网(http://www.xwangye.com)

下面总结一下他的用法。

学34A网T93页23o24网(http://www.xwangye.com)

dl标签是成对出现的,以<dl>开始,</dl>结束
自定义列表的开始使用<dl>标签,列表中每个元素的标题使用<dt>(definition term)定义,后面跟随<dd>(definition description)用于描述列表中元素的内容.
一般要配合DT与DD标签来使用。DT是列表组标签，DD是列表描述标签。

使用示例：

学34A网T93页23o24网(http://www.xwangye.com)

以下是代码片段：

<dl>
	<dt>www</dt>
		<dd>World Wide Web的缩写.</dd>
	<dt>dreamdu</dt>
		<dd>学网页网.</dd>
		<dd>www的:).</dd>
	<dt>com</dt>
	<dt>com.cn</dt>
	<dt>cn</dt>
		<dd>这都是域名的后缀.</dd>
</dl>

学34A网T93页23o24网(http://www.xwangye.com)

下面再给出一个与OL结合的例子：

学34A网T93页23o24网(http://www.xwangye.com)

以下是代码片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习dl中</title>
<style type="text/css">
dl *
{
margin: 0;
padding: 0;
font-size:12px;
}
dl
{
width: 405px;
height:128px;
border:1px #000 solid;
}

学34A网T93页23o24网(http://www.xwangye.com)

dt
{
width:120px;
height: 32px;
line-height: 32px;
text-align: center;
}
dt a
{
display: block;
text-decoration: none;
}
dt.ing a
{
background:#efefef;
}
dd
{
position: absolute;
display: none;
width:280px;
background-color: #fff;

学34A网T93页23o24网(http://www.xwangye.com)

}
dd li
{
line-height: 16px;
list-style-type: none;
text-align:right;
color:#999;
}
dd li a
{
float:left;
display:inline;
padding-left:5px;
}
dd.ing
{
display: block;
}
dd.no
{
display:none;
}
dd#d1
{
margin-top:-32px;
margin-left:120px;
}
dd#d2
{
margin-top:-64px;
margin-left:120px;
}
dd#d3
{
margin-top:-96px;
margin-left:120px;

学34A网T93页23o24网(http://www.xwangye.com)

}
dd#d4
{
margin-top:-128px;
margin-left:120px;
}
</style>
<script type="text/javascript">
var ddiShow=2;
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";
var iShow;
ddiShow=iShow;
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";
return false;
}
</script>
</head>

学34A网T93页23o24网(http://www.xwangye.com)

<body>
<dl>
<dt id="t1"><a href="#" onmouseover="return show('1');">测试菜单一</a></dt>
<dd id="d1">
  <ol>
   <li><a href="#">测试内容(菜单一)</a>1-24</li>
   <li><a href="#">测试内容(菜单一)</a>1-24</li>
   <li><a href="#">测试内容(菜单一)</a>1-24</li>
   <li><a href="#">测试内容(菜单一)</a>1-24</li>
   <li><a href="#">测试内容(菜单一)</a>1-24</li>
   <li><a href="#">测试内容(菜单一)</a>1-24</li>
   <li><a href="#">测试内容(菜单一)</a>1-24</li>
   <li><a href="#">测试内容(菜单一)</a>1-24</li>
  </ol>

学34A网T93页23o24网(http://www.xwangye.com)

</dd>
<dt id="t2" class="ing"><a href="#" onmouseover="return show('2');">测试菜单二</a></dt>
<dd id="d2" class="ing">
  <ol>
   <li><a href="#">测试内容(菜单二)</a>1-24</li>
   <li><a href="#">测试内容(菜单二)</a>1-24</li>
   <li><a href="#">测试内容(菜单二)</a>1-24</li>
   <li><a href="#">测试内容(菜单二)</a>1-24</li>
   <li><a href="#">测试内容(菜单二)</a>1-24</li>
   <li><a href="#">测试内容(菜单二)</a>1-24</li>
   <li><a href="#">测试内容(菜单二)</a>1-24</li>
   <li><a href="#">测试内容(菜单二)</a>1-24</li>  </ol>
</dd>
<dt id="t3"><a href="#" onmouseover="return show('3');">测试菜单三</a></dt>
<dd id="d3">
  <ol>
   <li><a href="#">测试内容(菜单三)</a>1-24</li>
   <li><a href="#">测试内容(菜单三)</a>1-24</li>
   <li><a href="#">测试内容(菜单三)</a>1-24</li>
   <li><a href="#">测试内容(菜单三)</a>1-24</li>
   <li><a href="#">测试内容(菜单三)</a>1-24</li>
   <li><a href="#">测试内容(菜单三)</a>1-24</li>
   <li><a href="#">测试内容(菜单三)</a>1-24</li>
   <li><a href="#">测试内容(菜单三)</a>1-24</li>  </ol>
</dd>
<dt id="t4"><a href="#" onmouseover="return show('4');">测试菜单四</a></dt>
<dd id="d4">
  <ol>
   <li><a href="#">测试内容(菜单四)</a>1-24</li>
   <li><a href="#">测试内容(菜单四)</a>1-24</li>
   <li><a href="#">测试内容(菜单四)</a>1-24</li>
   <li><a href="#">测试内容(菜单四)</a>1-24</li>
   <li><a href="#">测试内容(菜单四)</a>1-24</li>
   <li><a href="#">测试内容(菜单四)</a>1-24</li>
   <li><a href="#">测试内容(菜单四)</a>1-24</li>
   <li><a href="#">测试内容(菜单四)</a>1-24</li>  </ol>
</dd>
</dl>