DL，DT，DD，比传统table更语义，解析更快的table列表方式

最新推荐文章于 2021-08-15 10:38:26 发布

G_Smaller

最新推荐文章于 2021-08-15 10:38:26 发布

阅读量745

点赞数

分类专栏： HTML 文章标签： HTML

HTML 专栏收录该内容

1 篇文章

订阅专栏

使用dl,dt,dd替代传统的table布局

<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>-dl dt dd表格</title>  
<style>  
dl,dt,dd{  
    margin:0;  
    background:#fff5fa;  
    font-size:14px;  
    }  
dl{  
    margin:0 auto;  
    width:50%;  
    border:1px solid #f8b3d0;  
    border-bottom:none;  
    }  
dt{  
    font-weight:800;  
    background:#ff99cc;  
    color:#fff;  
    }  
dt,dd{  
    line-height:30px;  
    padding:0 0 0 10px;  
    border-bottom:1px solid #f8b3d0;  
    height:30px;  
    overflow:hidden  
    }  
dd{  
    text-indent:3em;  
    }  
.fff{  
    background:#fff  
    }  
dt span,dd span{  
    display:block;  
    float:right;  
    font-size:14px;  
    border-left:1px solid #f8b3d0;  
    text-indent:0em;  
    width:80px;  
    text-align:center;  
    }  

</style>  
</head>  
<body>  
<dl class=hb>  
<dt><span>下载地址</span><span>更新时间</span>热门IT资源下载</dt>  
<dd class=fff><span>——</span><span>11.2</span>Delphi发邮件（SendDLL.dll）应用例子</dd>  
<dd><span>——</span><span>11.3</span>EasyCrm 客户资源管理系统 v2011 2.0</dd>  
<dd class=fff><span>——</span><span>11.4</span>爱考.NET在线考试系统</dd>  
<dd><span>——</span><span>11.5</span>蓝色漂亮的管理员登录页模板</dd>  
<dd class=fff><span>——</span><span>11.6</span>如此简洁美观的管理登录模板页</dd>  
<dd><span>——</span><span>11.13</span>Delphi 学校学生信息查询系统</dd>  
<dd class=fff><span>——</span><span>11.30</span>Delphi图片管理，Access源代码版</dd></dl>  
</body>  
</html>

这里写图片描述