足球游戏_中国足彩网¥体育资讯$

用标准dl,dt,dd标签抛弃table列表
来源:易贤网 阅读:799 次 日期:2016-06-22 16:04:06
温馨提示:易贤网小编为您整理了“用标准dl,dt,dd标签抛弃table列表”,方便广大网友查阅!

现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd标签会让你节省中国足彩网的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!

如果你仍然在使用传统table来创建数据列表,那么请继续往下看,看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松…

table数据列表

传统table的数据列表代码如下所示。我们要为每行添加tr标签,然后还要在其中为标题和数据各加一个td标签,由于标签都是td,想要添加样式的话还要为每个td添加class属性。

代码如下:

<table>

<tbody>

<tr>

<td class="title">Name:</td>

<td class="text">Squall Li</td>

</tr>

<tr>

<td class="title">Age:</td>

<td class="text">23</td>

</tr>

<tr>

<td class="title">Gender:</td>

<td class="text">Male</td>

</tr>

<tr>

<td class="title">Day of Birth:</td>

<td class="text">26th May 1986</td>

</tr>

</tbody>

</table>

以下是相应的CSS代码,我们为之前在HTML中声明的class添加样式。

代码如下:

/*TABLE LIST DATA*/

table {

margin-bottom:50px;

}

table tr .title {

background:#5f9be3;

color:#fff;

font-weight:bold;

padding:5px;

width:100px;

}

table tr .text {

padding-left:10px;

}

从以上代码可以看出,使用table标签,如果想使用CSS来对内容进行修饰或修改的话,需要为td单元格添加一些相应的class属性。这样无形中增加了自己的工作量,代码会稍微变多了一些。代码变多意味着什么?意味着网站的流量在浪费、增加中国足彩网的产生Bug的几率以及后期维护更困难。

dl、dt、dd数据列表

现在让我们来看看使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构,然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。

代码如下:

<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>

而在css代码中,我们仅需让dt和dd向左浮动即可。

代码如下:

/*DL, DT, DD TAGS LIST DATA*/

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;

}

从dl、dt、dd的实例中你应该能明显的看出它们的代码更简洁更平滑更符合语义化了吧。

看到这里,如果你还在坚持使用table标签来完成web表单或其它网页布局的话,现在是时候改变一下你的代码了。让你的工作更轻松些吧!

中国足彩网信息请查看网页制作
易贤网手机网站地址:用标准dl,dt,dd标签抛弃table列表
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标