IT技术学习网
IT技术学习网
您的位置: 主页 > 编程技术 > css >

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

2014-10-31 17:51 来源: IT技术学习网原创 阅读:

以往,我们实现表格是使用的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>itjsxx.com</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>itjsxx.com</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>

html+css dl dt dd 标签实现表格用法实例
转载需注明出处:IT技术学习网 http://www.itjsxx.com/css/dl_dt_dd_table.html

评论文章 html+css dl dt dd 标签实现表格用法实例
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
IT技术学习网 - 关于我们 - 联系我们 - 版权声明 - 网站地图