Icons list

Icons list

table style

<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;/*定义列宽 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 style

<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;
}