mod_service底部服务栏制作

主要知识点：亲儿子选择器&浮动与定位&圆角边框

HTML结构

    <!-- footer底部制作 -->
    <div class="footer">
        <div class="top w">
            <div class="mod_service">
                <div class="out1">
                    <div class="slogan">?</div>
                    <div class="text">
                        <dt class="dt">正品保障</dt>
                        <dd class="dd">正品保障，提供发票</dd>
                    </div>
                </div>
                <div class="out2">
                    <div class="slogan">?</div>
                    <div class="text">
                        <dt class="dt">极速物流</dt>
                        <dd class="dd">极速物流，极速发货</dd>
                    </div>
                </div>
                <div class="out3">
                    <div class="slogan">?</div>
                    <div class="text">
                        <dt class="dt">无忧售后</dt>
                        <dd class="dd">7天无理由退换货</dd>
                    </div>
                </div>
                <div class="out4">
                    <div class="slogan">?</div>
                    <div class="text">
                        <dt class="dt">特色服务</dt>
                        <dd class="dd">私人订制家电套餐</dd>
                    </div>
                </div>
                <div class="out5">
                    <div class="slogan">?</div>
                    <div class="text">
                        <dt class="dt">帮助中心</dt>
                        <dd class="dd">您的购物指南</dd>
                    </div>
                </div>
            </div>
            <div class="mod_help"></div>
            <div class="mod_copyright"></div>
        </div>
    </div>

虽然这次的HTML结构有点长，但是其实out1-out5都是一样的结构

CSS代码

/* footer 底部制作 */

.footer {
    height: 435px;
    background-color: #f5f5f5;
    margin-top: 30px;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

.mod_service {
    height: 110px;
    border-bottom: 1px solid #ededed;
}

.mod_service>div {
    float: left;
    position: relative;
    width: 240px;
    height: 110px;
    text-align: center;
}

.mod_service .text {
    position: absolute;
    top: 40px;
    left: 95px;
    width: 190px;
    text-align: left;
}

.mod_service .text .dt {
    font-size: 14px;
    color: #333333;
    font-weight: 700;
}

.mod_service .slogan {
    position: absolute;
    top: 30px;
    left: 38px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #c81623;
    font-family: ‘icomoon‘;
    font-size: 30px;
    color: #fff;
    line-height: 55px;
}

既然out1-out5的结构是一样的，那么他们党的CSS样式就可以使用子选择器写在一起，极大的减少了代码量

最终效果

写在最后，谢谢你的阅读，你的阅读也是我写下去的动力哟

仿京东静态网站制作之底部服务栏