A-A+

dl dt dd用法

2015年07月13日 htmlcss 暂无评论 阅读 118 次

dl dt dd的用法
dl 内容块
dt 内容块的标题
dd
内容
可以这么写:

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt
和dd中可以再加入 ol ul li和p
理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。DD DT DL标签

京东底部列表代码如下:

京东底部dd,dt,dl用法展示

京东底部dd,dt,dl用法展示

<div class="w">
<dl class="fore1">
<dt>购物指南</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-29.html">购物流程</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-151.html">会员介绍</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-297.html">生活旅行/团购</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue.html">常见问题</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-136.html">大家电</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/index.html">联系客服</a></div>
</dd>
</dl>
<dl class="fore2">
<dt>配送方式</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-81-100.html">上门自提</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-81.html">211限时达</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/103-983.html">配送服务查询</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/109-188.html">配送费收取标准</a></div>
<div><a target="_blank" href="http://en.jd.com/chinese.html">海外配送</a></div>
</dd>
</dl>
<dl class="fore3">
<dt>支付方式</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-172.html">货到付款</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-173.html">在线支付</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-176.html">分期付款</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-174.html">邮局汇款</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-175.html">公司转账</a></div>
</dd>
</dl>
<dl class="fore4">
<dt>售后服务</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/321-981.html">售后政策</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-132.html">价格保护</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/130-978.html">退款说明</a></div>
<div><a rel="nofollow" target="_blank" href="http://myjd.jd.com/repair/repairs.action">返修/退换货</a></div>
<div><a rel="nofollow" target="_blank" href="http://help.jd.com/user/issue/list-50.html">取消订单</a></div>
</dd>
</dl>
<dl class="fore5">
<dt>特色服务</dt>
<dd>
<div><a target="_blank" href="http://help.jd.com/user/issue/list-133.html">夺宝岛</a></div>
<div><a target="_blank" href="http://help.jd.com/user/issue/list-134.html">DIY装机</a></div>
<div><a rel="nofollow" target="_blank" href="http://fuwu.jd.com/">延保服务</a></div>
<div><a rel="nofollow" target="_blank" href="http://giftcard.jd.com/market/index.action">京东E卡</a></div>
<div><a rel="nofollow" target="_blank" href="http://mobile.jd.com/">京东通信</a></div>
</dd>
</dl>
<div id="coverage">
<div class="dt">
京东自营覆盖区县
</div>
<div class="dd">
<p>京东已向全国2050个区县提供自营配送服务,支持货到付款、POS机刷卡和售后上门服务。</p>
<p class="ar"><a target="_blank" href="http://help.jd.com/user/issue/103-983.html">查看详情&nbsp;&gt;</a></p>
</div>
</div>
<span class="clr"></span>
</div>

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录