html+css dl dt dd 标签实现表格用法实例

时间：2016-09-21

以往，我们实现表格是使用的table,tr,td标签。div+css广泛使用以后，在网页设计中表格的使用越来越少了。

本文通过2个实例，给出了，使用dl dt dd 标签实现表格的用法。

dl dt dd 标签实现表格用法实例1：

<!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>genban.org</title>
<style type="text/css">
dl {
  margin-bottom:50px;
}

dl dt {
  background:#5f9be3;
  color:#fff;
  float:left;
  font-weight:bold;
  margin-right:10px;
  padding:5px;
  width:100px;
}

dl dd {
  margin:2px 0;
  padding:5px 0;
}
</style>
</head>

<body>
<dl>
  <dt>Name: </dt>
  <dd>Squall Li</dd>
  <dt>Age: </dt>
  <dd>23</dd>
  <dt>Gender: </dt>
  <dd>Male</dd>
  <dt>Day of Birth:</dt>
  <dd>26th May 1986</dd>
</dl>
</body>
</html>

dl dt dd 标签实现表格用法实例2：

<!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>genban.org</title>
<style type="text/css">
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;}
.bg{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>目录</dt>
        <dd class=bg><span>——</span><span>11.1</span>第二节</dd>
        <dd><span>——</span><span>11.2</span>第二节</dd>
        <dd class=bg><span>——</span><span>11.3</span>第二节</dd>
        <dd><span>——</span><span>11.4</span>第二节</dd>
        <dd class=bg><span>——</span><span>11.5</span>第二节</dd>
        <dd><span>——</span><span>11.6</span>第二节</dd>
        <dd class=bg><span>——</span><span>11.7</span>第二节</dd>
        <dd><span>——</span><span>11.8</span>第二节</dd>
        <dd class=bg><span>——</span><span>11.9</span>第二节</dd>
        <dd><span>——</span><span>11.10</span>第二节</dd>
        <dd class=bg><span>——</span><span>11.11</span>第二节</dd>
        <dd><span>——</span><span>11.12</span>第二节</dd>
</dl>
</body>
</html>

上一条：word-wrap: break-word; 下一条:css实现文字在图片下方

html+css dl dt dd 标签实现表格用法实例

相关文章

最新文章