【电商13】newsflash lifeservice

• 它上边有盒子，就只定义了三边

• 格子的创造方法是，只给右边下边边框，再浮动

• 一行放不下4个盒子li自动掉下去，解决办法：给ul设置足够的宽度

• 一行4盒子超出范围，解决办法：overflow：hidden（因为lifeservice这个大盒子已经定义了三边了）

• i是文本斜体，行内元素，我不知道我为啥老是不给width，height，背景咋能出来呢

• 行内块元素可以使用text-align，居中

html

 <div class="lifeservice">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                    </ul>
                </div>

index.css

.lifeservice {
    overflow: hidden;
    height: 209px;
    /* 上面的模块有一个下边框了，所以只要三个边 */
    border: 1px solid #e4e4e4;
    border-top: 0;
}
.lifeservice ul {
     256px;     /* 让ul足够宽，能够装下4个li，li就不会掉下来，妙！！ */
    float: left;
}

.lifeservice ul li {
    text-align: center;
    float: left;
     63px;
    height: 71px;
    border-bottom: 1px solid #e4e4e4;        /* 只给右下边框哩 哦吼 */
    border-right: 1px solid #e4e4e4;
}

.lifeservice ul li i {
    margin-top: 12px;
     24px;         /* i是文本斜体，行内元素，我不知道我为啥老是不给width，height，背景咋能出来呢 */
    height: 28px;
    background: url(../images/icons.png) no-repeat -19px -15px;
    text-align: center;     /* 行内块元素可以使用text-align，居中 */
    display: inline-block;
}