这是一个newflash 板块。从上往下做,上面的news部分做完了,现在要做黄色框内部分,这个盒子class命名为server。因为结构一样,用ul>li*12>a[]>span+p,其中的小图片用精灵图来做。
- 结构写法
<div class="service">
<ul>
<li>
<a href="#">
<span></span>
<p>话费</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>电影票</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>游戏</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>彩票</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>加油站</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>酒店</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>火车票</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>众筹</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>理财</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>礼品卡</p>
</a>
</li>
<li>
<a href="#">
<span></span>
<p>白条</p>
</a>
</li>
</ul>
</div>
- 样式写法
1.先写.service,w248+h208 border 1px #e4e4e4
service {
width: 248px;
height: 208px;
border: 1px solid #e4e4e4;
border-top: none;
}
这里为了显示效果,我将边框改为了红色 如下:
2.第二步写里边的li
li量的w62+h70,li左浮动 边框1px
.service li {
float: left;
width: 62px;
height: 70px;
text-align: center;
border: 1px solid #e4e4e4;
}
为了效果,将li边框改为黑色,如下:
这时候你会发现li之间的边框变粗了,此时不是1px,而上2px,因为li与li之间边框发生了并列显示。如何解决呢??
3.解决样式细线的技巧
我们让每个li往左和往上移动1px,就用margin负值,可以使右边的li压住左边的li,实现边框合并,做出细线表格,上边框也是同理。
.service li {
float: left;
width: 62px;
height: 70px;
text-align: center;
border: 1px solid #e4e4e4;
margin-top: -1px;
margin-left: -1px;
} 如下图,就得到了解决。
4.但是此时又有了新问题,下面的li并没有到红色盒子service里。原因很简单,因为li长度不够了,那么这时,我们给ul的宽度设长一些。
.service ul {
width: 270px;
}
结果如下
5.模块溢出隐藏技巧
这时候黑色盒子溢出了,但是我们只需要显示在红色盒子service里,说明li的父元素service溢出了,所以我们利用元素的显示和溢出属性,overflow:hidden 作用在service上,就可以了。
.service {
width: 248px;
height: 208px;
border: 1px solid #e4e4e4;
border-top: none;
overflow: hidden;
}如下图,所有问题就解决了