DD DT DL tag usage examples

DD DT DL tag usage examples
We usually use the <ul><li> tags, but the dd and dt tags are also good, especially when publishing a program, you can use them to layout the list of functional modules.

<dl>< /dl>< dt>< /dt>< dd>< /dd>
<dl>< /dl> is used to create a normal list, <dt>< /dt> is used to create the upper item in the list, and <dd>< /dd> is used to create the lower item in the list. Both <dt>< /dt> and <dd>< /dd> must be placed between the <dl>< /dl> tag pair. Take a look at the following example and you will understand:

dl ——define list——define list
dt ——define list title——is used to generate the titles of each list item in the definition list. It can be used repeatedly to define the titles of multiple list items.
dd——define list define——is used to generate the description text fields for each list item in the definition list. It can be used repeatedly to define multiple description text fields. dd is a brief description or explanation of the corresponding dt

example:

Copy code
The code is as follows:

<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>

Example 2:

Copy code
The code is as follows:

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
dt {
float: left;
width: 60px;
margin: 0px;
padding: 0px;
}
dd {
float: left;
clear: none;
width: 290px;
margin: 0px;
padding: 0px;
}
dl {
width: 350px;
font-size: 9pt;
line-height: 1.5em;
position:relative;
margin: 0px;
padding: 0px;
left:15px;
}
.red {
color: #FF3300;
}
#box {
width: 500px;
background-color: #F1F1F7;
}
#box #content {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="content">
<img src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ >
<dl>
<dt>Product Name:</dt>
<dd><strong>[What a big one] </strong>Youhui: <span class="red"><em>15% off</em></span></dd>
<dt>Product Introduction:</dt>
<dd>Product nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct nameProduct name…[<span class="red";>Detailed introduction</span>]</dd>
<dt>Store Address:</dt>
<dd>Product Name</dd>
<dt>Contact number:</dt>
<dd>0000-12345678 87654321 </dd>
</dl>
</div>
</div>
</body>
</html>

<<:  How to implement insert if none and update if yes in MySql

>>:  Implementation of CSS sticky footer classic layout

Recommend

Implementation code of using select to select elements in Vue+Openlayer

Effect picture: Implementation code: <template...

Connector configuration in Tomcat

JBoss uses Tomcat as the Web container, so the co...

RGBA alpha transparency conversion calculation table

Conversion between rgba and filter values ​​under...

HTML fixed title column, title header table specific implementation code

Copy code The code is as follows: <!DOCTYPE ht...

How to install Windows Server 2008 R2 on Dell R720 server

Note: All pictures in this article are collected ...

Table Tag (table) In-depth

<br />Table is a tag that has been used by e...

JavaScript implements simple calculator function

This article example shares the specific code of ...

Detailed explanation of MySQL trigger trigger example

Table of contents What is a trigger Create a trig...

WeChat applet implements the Record function

This article shares the specific code for the WeC...

Detailed explanation of Nodejs array queue and forEach application

This article mainly records the problems and solu...

What is html file? How to open html file

HTML stands for Hypertext Markup Language. Nowada...

Teach you how to build a react+antd project from scratch

The previous articles were all my own learning lo...

3D tunnel effect implemented by CSS3

The effect achievedImplementation Code html <d...

MySQL query syntax summary

Preface: This article mainly introduces the query...

How to implement input checkbox to expand the click range

XML/HTML CodeCopy content to clipboard < div s...