9.1 dl, DT, and DD tags in html

In this chapter, we will build a more complex drop-down menu based on the previous two chapters. When the content of the site is relatively rich, the structure is more complex, the first level of navigation menu is often not enough, then need a multilevel menu to achieve hierarchical structure. In fact, anyone using a computer will not be unfamiliar with the dropdown menu, and almost all the software will provide the user with an operational command interface through the menu. On the early web site, making multi-level menus is a hassle and difficult to maintain. However, in recent years, due to the constant popularity of CSS, the use of CSS-made menus can be very convenient for the site to provide clear navigation support. In this case, a drop-down menu is created. Figure 9.1 shows the effect that the submenu does not open when the mouse leaves the menu, and Figure 1 shows the effect of a submenu open. Figure 1 Effects when a submenu is displayed A set of HTML tags-DL,DT and DD are introduced here. This set of tags is not as common as the UL and Li tags, but it is very appropriate to define the structure in this case. DL, DT, DD This set of tags and UL, Li very similar, also used in the list structure. The DL is referred to as the "definition list" (definitionlist), where the use of the method is equivalent to UL;DT and DD respectively referred to as "definition title" and "Definition description" (defined description), They are equivalent to Li on the way they are used. For example, there is the following HTML code: FoldingExpandxml/html Codecopy content to clipboard < Body >    < DL >    <DT> Web Learning Web page making tutorial </DT > <dd>HTML tutorial </dd> <dd>CSS Tutorial </dd>    <dd>php tutorial </dd> <DT> Web Learning Network tool Tutorial </dt> <dd>Zend Studio</dd > <dd>Dreamweaver</ DD > <dd>Visual Studio</dd> /c8> <DT> Web Learning Network plane tutorial </dt>    <dd>PhotoShop</ DD > <dd>CorelDraw</dd > <dd>Fireworks</dd>    </ DL >    </ Body >    The effect in the browser is shown in 1. You can see that the DL is equivalent to U1,DT and DD equivalent to Li. The difference is that DT and DD are treated differently. If you want the menu to have a submenu, you can define the menu item text of the main menu as DT, and the menu item under the menu is defined as DD. Figure 1 Using the definition list Click to download the 8th to 17th CSS Tutorial resource to return to the tutorial list of CSS Tutorial layout

Editor: Web Learning Network

This address: http://www.lodidance.com/css/jc/728.html