【電商9】footer mod_help

阿新 • • 發佈：2020-12-21

大小盒子有間隔，通常給大盒子padding，不是小盒子給margin
dl不管它什麼元素，反正要float的
最後一欄一個dd，該用img地方就用嘍

html

<div class="mod_help">

                <dl class="dl">
                    <dt> 服務指南</dt>
                    <dd><a href="#">購物流程</a></dd>
                    <dd><a href="#">會員介紹</a></dd>
                    <dd><a href="#">生活旅行/團購</a></dd>
                    <dd><a href="#">常見問題</a></dd>
                    <dd><a href="#">大家電</a></dd>
                    <dd>
                        <a href="#">聯絡客服</a>
                    </dd>
                </dl>
                <dl class="dl">
                    <dt> 服務指南</dt>
                    <dd><a href="#">購物流程</a></dd>
                    <dd><a href="#">會員介紹</a></dd>
                    <dd><a href="#">生活旅行/團購</a></dd>
                    <dd><a href="#">常見問題</a></dd>
                    <dd><a href="#">大家電</a></dd>
                    <dd>
                        <a href="#">聯絡客服</a>
                    </dd>
                </dl>
                <dl class="dl">
                    <dt> 服務指南</dt>
                    <dd><a href="#">購物流程</a></dd>
                    <dd><a href="#">會員介紹</a></dd>
                    <dd><a href="#">生活旅行/團購</a></dd>
                    <dd><a href="#">常見問題</a></dd>
                    <dd><a href="#">大家電</a></dd>
                    <dd>
                        <a href="#">聯絡客服</a>
                    </dd>
                </dl>
                <dl class="dl">
                    <dt> 服務指南</dt>
                    <dd><a href="#">購物流程</a></dd>
                    <dd><a href="#">會員介紹</a></dd>
                    <dd><a href="#">生活旅行/團購</a></dd>
                    <dd><a href="#">常見問題</a></dd>
                    <dd><a href="#">大家電</a></dd>
                    <dd>
                        <a href="#">聯絡客服</a>
                    </dd>
                </dl>
                <dl class="dl">
                    <dt> 服務指南</dt>
                    <dd><a href="#">購物流程</a></dd>
                    <dd><a href="#">會員介紹</a></dd>
                    <dd><a href="#">生活旅行/團購</a></dd>
                    <dd><a href="#">常見問題</a></dd>
                    <dd><a href="#">大家電</a></dd>
                    <dd>
                        <a href="#">聯絡客服</a>
                    </dd>
                </dl>
                <dl class="dl">
                    <dt> 幫助中心</dt>
                    <dd>
                        <img src="images/wx_cz.jpg" alt=""> 品優購客戶端
                    </dd>
                </dl>

            </div>

common.css


.mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding: 20px 0 0 50px;          /*大小盒子有間隔，通常給大盒子padding，不是小盒子給margin*/
}

.mod_help .dl {
    width: 200px;
    float: left;
}

.mod_help .dl:last-child {      /* 妙*/
    width: 90px;
    float: left;
    text-align: center;
}

.mod_help .dl dt {
    margin-bottom: 10px;
    font-size: 16px;
}

.mod_help .dl dd {
    font-size: 12px;
}