9.1 HTML中的dl、dt和dd标记
2020-12-13 15:59
本章中，我们将在前面两章的基础上，制作出更为复杂的下拉菜单。当网站的内容比较丰富，结构比较复杂的时候，一级导航的菜单往往就不够用了，这时就需要多级菜单来实现层级结构。实际上任何使用电脑的人对下拉菜单都不会陌生，几乎所有的软件都会通过菜单为用户提供操作的命令接口。
在早期的网站上，制作多级的菜单是件很麻烦的事情，而且不易维护。但是近年来，由于CSS不断普及，使用CSS制作的菜单已经可以非常方便地为网站带来清晰的导航支持。
本案例就来制作一个下拉菜单。图9.1所示为鼠标离开菜单时子菜单未打开的效果，图1所示为一个子菜单打开后的效果。
图1 显示子菜单时的效果
这里介绍一组HTML标记-dl，dt和dd。这组标记不像ul和li标记那么常用，但是用于定义本案例中的结构是非常合适的。
dl、dt、dd这组标记和ul、li非常类似，也用于列表结构。dl被称为“定义列表”(definitionlist)，在使用方法上相当于ul；dt和dd分别称为“定义标题”(definition title)和“定义描述”（definition description），它们在使用方法上相当于li。例如有下面一段HTML代码：
- body>
- dl>
- dt>网页学习网网页制作教程dt>
- dd>HTML教程dd>
- dd>CSS教程dd>
- dd>PHP教程dd>
- dt>网页学习网工具教程dt>
- dd>Zend Studiodd>
- dd>Dreamweaverdd>
- dd>Visual Studiodd>
- dt>网页学习网平面教程dt>
- dd>PhotoShopdd>
- dd>CorelDrawdd>
- dd>Fireworksdd>
- dl>
- body>
在浏览器中的效果如图1所示。可以看到dl相当于u1，dt和dd相当于li．区别在于dt和dd会被区别对待。如果希望菜单具有子菜单，就可以把主菜单的菜单项文字定义为dt，下属于菜单中的菜单项定义为dd。
图1 使用“定义列表”
点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表
上一篇：Windows环境的apache下Virtual Host 设置
下一篇：(翻译) How variables are allocated memory in Javascript? | scope chain | lexicial scope