制作京东首页最下方菜单栏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
border: 1px solid #333333;
width: 1260px;
height: 200px;
}
dt
{
font: 15px "宋体";
font-weight: 800;
text-indent: 2.5em;
}
.dl1
{
float: left;
padding-right: 140px;
padding-bottom: 75px;
font: 12px/14px "微软雅黑";
line-height: 25px;
}
.dl2
{
padding-right: 115px;
padding-bottom: 92px;
float: left;
font: 12px/14px "微软雅黑";
line-height: 25px;
}
.dl3
{
padding-right: 150px;
padding-bottom: 92px;
float: left;
font: 12px/14px "微软雅黑";
line-height: 25px;
}
.dl4
{
float: left;
padding-right: 133px;
padding-bottom: 92px;
font: 12px/14px "微软雅黑";
line-height: 25px;
}
.dl5
{
float: left;
padding-bottom: 60px;
font: 12px/14px "微软雅黑";
line-height: 25px;
}
</style>
</head>
<body>
<div>
<dl class="dl1">
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl class="dl2">
<dt>配送方式</dt>
<dd>上门自提</dd>
<dd>211限时达</dd>
<dd>配送服务查询</dd>
<dd>配送费收取标准</dd>
<dd>海外配送</dd>
</dl>
<dl class="dl3">
<dt>支付方式</dt>
<dd>货到付款</dd>
<dd>在线支付</dd>
<dd>分期付款</dd>
<dd>邮局汇款</dd>
<dd>公司转账</dd>
</dl>
<dl class="dl4">
<dt>售后服务</dt>
<dd>售后政策</dd>
<dd>价格保护</dd>
<dd>退款说明</dd>
<dd>返修/退换货</dd>
<dd>取消订单</dd>
</dl>
<dl class="dl5">
<dt>特色服务</dt>
<dd>夺宝岛</dd>
<dd>DIY装机</dd>
<dd>延保服务</dd>
<dd>京东E卡</dd>
<dd>京东通信</dd>
<dd>京东JD+</dd>
</dl>
</div>
</body>
</html>
运行结果: