【电商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 {
width: 256px; /* 让ul足够宽,能够装下4个li,li就不会掉下来,妙!! */
float: left;
}
.lifeservice ul li {
text-align: center;
float: left;
width: 63px;
height: 71px;
border-bottom: 1px solid #e4e4e4; /* 只给右下边框哩 哦吼 */
border-right: 1px solid #e4e4e4;
}
.lifeservice ul li i {
margin-top: 12px;
width: 24px; /* i是文本斜体,行内元素,我不知道我为啥老是不给width,height,背景咋能出来呢 */
height: 28px;
background: url(../images/icons.png) no-repeat -19px -15px;
text-align: center; /* 行内块元素可以使用text-align,居中 */
display: inline-block;
}