CSS----京东首页最下方菜单栏

制作京东首页最下方菜单栏:

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

运行结果:

猜你喜欢

转载自blog.csdn.net/qq_36818386/article/details/81087382