京东官网多、快、好、省的页面栏截图：
为什么今天会写这篇文章，今天逛京东看到这个页面比较有特色，主要是我想知道，多、快、好、省这几个图字，是怎么设计出来。我用的实现工具是Visual Studio Code，也可以用HBuilder工具实现。
需要用到的图片如下：
思考一下：这几个字如何用代码一个一个的分离出来？因为我在做页面的时候，卡在这里很久，我自己觉得做这个代码，这个不难，但是不容易思考到，看到的小伙伴会不会和我一样会想到这个图片如何给它分离出来呀。
经过一个早上的琢磨，嘿嘿嘿！请欣赏代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东多快好省页面</title>
</head>
<style>
body {
font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
p,ul,h5 {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 1000px;
height: 0 auto;
}
li,h5,p {
display: inline-block;
vertical-align: middle;
}
.service {
height:103px;
line-height:103px;
background-color: #f4f4f4;
border-bottom: 1px solid #dedede;
}
.service ul li {
margin-left: 10px;
margin-right: 25px;
}
.service ul li p {
height: 42px;
line-height: 42px;
font-size: 18px;
font-weight: 700;
color: #444;
margin-left: 3px;
}
.service ul li h5 {
width: 36px;
height: 42px;
text-indent: -999px;
background-image: url(./img/jd_duo_kuai_hao_sheng.png);
background-size: 113px 86.5px;
}
.service ul li:nth-child(1) h5 {
background-position: 0 0;
}
.service ul li:nth-child(2) h5 {
background-position: -38.5px 0;
}
.service ul li:nth-child(3) h5 {
background-position: -77px 0;
}
.service ul li:nth-child(4) h5 {
background-position: 0px -44.5px;
}
</style>
<body>
<div class="service wrap">
<ul>
<li>
<h5>多</h5>
<p>品类齐全，轻松购物</p>
</li>
<li>
<h5>快</h5>
<p>多仓直发，极速配送</p>
</li>
<li>
<h5>好</h5>
<p>正品行贷，精致服务</p>
</li>
<li>
<h5>省</h5>
<p>天天低价，畅选无忧</p>
</li>
</ul>
</div>
</body>
</html>运行效果图：
感兴趣的小伙伴可以去试试自己也去实现类似的这种页面，慢慢来总会有收获的！
