列表标签

1、常见的列表标签：ul、ol——li; dl->dt->dd

ul：无序列表，有默认样式，对于样式相同的图片或者组块可以用它来进行排列；

ol：有序列表，会自动排序，有默认样式

li：li里面可以包含任意标签。

dl:自定义列表，dt：自定义列表头，dd：自定义列表头的解释说明；dd里面可以包含任意标签。dd有默认样式。

dl的用途：商品的参数解释的时候可以用到

代码一：简单的自定义列表

<dl>  
    <dt>www</dt>  
        <dd>World Wide Web的缩写.</dd>  
    <dt>dreamdu</dt>  
        <dd>梦之都.</dd>  
    <dt>com</dt>  
        <dd></dd>  
    <dt>com.cn</dt>  
        <dd></dd>  
    <dt>cn</dt>  
        <dd>这都是域名的后缀.</dd>  
</dl>

代码二：加样式的自定义列表

<!DOCTYPE html>
<html>   
<head>   
<title>Html中dl,dt,dd标签实例</title>   
<style type="text/css">    
dt {   
        float: left;   
        width: 60px;   
        margin: 0px;   
        padding: 0px;   
}   
dd {   
        float: left;     
        width: 290px;   
        margin: 0px;   
        padding: 0px;   
}   
dl {   
        width: 350px;   
        font-size: 9pt;   
        line-height: 1.5em;   
        overflow:hidden;
        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">   
    <dl>   
       <dt>商品名称：</dt>   
         <dd><strong>[郁金香] </strong>忧惠：<span class="red"><em>8.5折</em></span></dd>   
       <dt>商品简介：</dt>   
         <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span ><a href="#">详细介绍</a>]</dd>   
       <dt>店铺地址：</dt>   
         <dd>北京市海淀区</dd>   
       <dt>联系电话：</dt>   
         <dd>0000-12345678 87654321 </dd>   
    </dl>   
    </div>   
</div>   
</body>  
</html>

猜你喜欢