图标列表
table式
<table class="icon">
<tr>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
</tr>
<tr>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
</tr>
<tr>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
<td>
<a class="item1" href="">
<span></span>
<i>充话费</i>
</a>
</td>
</tr>
</table>
table{
border-collapse: collapse;
}
th,td{
padding: 0;
}
#display .right .icon{
width: 100%;
height: 233px;
background-color: #fff;
table-layout: fixed;
}
#display .right .icon td{
border: 1px solid #f4f4f4;
text-align: center;
}
#display .right .icon td span{
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
background: url(images/logo.png) no-repeat;
}
#display .right .icon td i{
line-height: 34px;
color: #333;
}
ul式
<div class="app">
<div class="title clearfix">
<h3 class="fl">APP</h3>
<a class="fr" href="">更多></a>
</div>
<ul class="content">
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
<li><a href="#"><img src="images/app.jpg" alt=""></a></li>
</ul>
</div>
</div>
#display .right .app{
height: 111px;
background: #fff;
}
#display .right .app img{
width: 32px;
height: 32px;
}
#display .right .app .title{
height: 30px;
line-height: 30px;
}
#display .right .app h3{
font-size: 14px;
padding-left: 14px;
}
#display .right .app a{
margin-right: 10px;
}
#display .right .app a:hover{
color: #f40;
}
#display .right .app .content{
text-align: center;
font-size: 0;
}
#display .right .app .content li{
width: 32px;
height: 32px;
display: inline-block;
margin:0 10px 8px 10px;
}