【电商8】footer mod_service

• 外边距塌陷问题：尽量避免子盒子margin-top的使用

• 盒子模型更喜欢怪异盒子模型，不然总是掉到下面去

html

<footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>                      /*放精灵图*/
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help"></div>
        </div>
    </footer>

common.css

.footer {
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;            /* mod_service用margin-top: 30px;上面部分是有一个白块;出现外边距塌陷问题 */
}

.footer .mod_service {
    height: 80px;
    width: 1200px;
    border-bottom: 1px solid #ccc;
}

.mod_service li {
    float: left;
    width: 250px;
    height: 50px;
    padding-left: 35px;
}

.mod_service li h5 {
    float: left;                /* 这样文字就能自动环绕了 */
    width: 50px;
    height: 50px;
    background: url("../images/icons.png") no-repeat -252px -2px;
    margin-right: 8px;     /* 给图片加margin的效果好，文字有float的不确定性 */
}

.service_txt h4 {
    font-size: 14px;
}

.service_txt p {
    font-size: 12px;
}