<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #ccc;
}
.wrap{
width: 306px;
height: 239px;
margin: 50px auto;
background-color: #fff;
margin: 50px auto;
}
.wrap .ul1{
background-color: #fff;
border: 1px solid #f1f1f1;
}
.wrap .ul1 li{
border-bottom: 1px solid #f4f4f4;
width: 71px;
height: 76px;
float: left;
text-align: center;
}
.wrap .ul1 li div {
width: 24px;
height: 24px;
margin: 0 auto;
margin-top: 13px;
}
.wrap .ul1 li div p{
font-size: 12px;
margin-top: 11px;
}
.wrap .ul1 li .a{
background: url(./sprites.png) -10px -99px;
}
.wrap .ul1 li .b{
background: url(./sprites.png) -10px -10px;
}
.wrap .ul1 li .c{
background: url(./sprites.png) -55px -10px;
}
.wrap .ul1 li .d{
background: url(./sprites.png) -10px -54px;
}
.wrap .ul1 li .e{
background: url(./sprites.png) -54px -54px;
}
.wrap .ul1 li .f{
background: url(./sprites.png) -99px -51px;
}
.wrap .ul1 li .g{
background: url(./sprites.png) -49px -97px;
}
.wrap .ul1 li .h{
background: url(./sprites.png) -99px -10px;
}
.wrap .ul2 li{
width: 290px;
height: 99px;
background-color: #fff;
}
.wrap .ul2 li p a {
text-decoration: none;
color: black;
font-size: 12px;
margin-left: 168px;
}
.wrap .ul2 li p span {
font-size: 16px;
font-weight: bold;
margin-left: 14px;
}
.wrap .ul2 li{
width: 306px;
overflow: hidden;
}
.wrap .ul2 li p {
margin-top: 9px;
}
.wrap .ul2 li div{
width: 32px;
height: 32px;
float: left;
margin-top: 8px;
margin-right: 21px;
}
.wrap .ul2 li .i {
margin-left: 23px;
background: url(./icon.png) -62px -62px;
}
.wrap .ul2 li .j {
background: url(./icon.png) -114px -10px;
}
.wrap .ul2 li .k {
background: url(./icon.png) -10px -10px;
}
.wrap .ul2 li .l {
background: url(./icon.png) -62px -10px;
}
.wrap .ul2 li .m {
background: url(./icon.png) -10px -62px;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="ul1">
<li>
<div class="a"></div>
<p>充话费</p>
</li>
<li>
<div class="b"></div>
<p>旅行</p>
</li>
<li>
<div class="c"></div>
<p>车检</p>
</li>
<li>
<div class="d"></div>
<p>游戏</p>
</li>
<li>
<div class="e"></div>
<p>彩票</p>
</li>
<li>
<div class="f"></div>
<p>电影</p>
</li>
<li>
<div class="g"></div>
<p>酒店</p>
</li>
<li>
<div class="h"></div>
<p>理财</p>
</li>
</ul>
<ul class="ul2">
<li>
<p><span>阿里app</span><a href="#">更多></a></p>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
</li>
</ul>
</div>
</body>
</html>