Comprehensively design an oppe homepage -- page service part

analysis ： Five parts In the same form Except for the content --------------- Use list to do -ul-li

  There are pictures and words in every list ------ Mixed arrangement of pictures and texts ---- Use dl-----dt picture dd written words

HTML 

	<!--  The service part of the page  -->
	<div id="service">
		<div class="container">
			<ul>
				<li class="service0">
					<dl>
						<dt></dt>
						<dd class="dd1"> Genuine protection </dd>
						<dd class="dd2"> All goods are original </dd>
					</dl>
				</li>
				<li class="service1">
					<dl>
						<dt></dt>
						<dd class="dd1">79 Package mail from yuan </dd>
						<dd class="dd2"> Efficient direct logistics distribution </dd>
					</dl>
				</li>
				<li class="service2">
					<dl>
						<dt></dt>
						<dd class="dd1">7 Day return and exchange </dd>
						<dd class="dd2"> Support 7 Day return ,30 I'd like to exchange it in a few days </dd>
					</dl>
				</li>
				<li class="service3">
					<dl>
						<dt></dt>
						<dd class="dd1">285 Self raising point </dd>
						<dd class="dd2"> Relaxed and comfortable , Covering all major cities </dd>
					</dl>
				</li>
				<li class="service4">
					<dl>
						<dt></dt>
						<dd class="dd1">365 Customer service outlets </dd>
						<dd class="dd2"> All goods are original </dd>
					</dl>
				</li>
			</ul>
		</div>
	</div>

 CSS

/**************************************************
***************** Style of the service part of the page **************
***************************************************/
#service{
	height: 100px;
	background-color: #fff;

}
#service dl{
	width: 200px;
	height: 100px;
	/*border: 1px solid #000;*/
	position: relative; /* Use... For the positioning of the following image parts relative*/
}
#service dl dt{ /* Picture part */
	width: 42px;
	height: 42px;
	background: url("../img/icons.png") no-repeat 0px -44px;
	position: absolute ;
	top: 30px;
	left: 10px;
}
#service .service1 dt:nth-child(1){
	background: url("../img/icons.png") no-repeat -51px -44px;

}
#service .service2 dt:nth-child(1){
	background: url("../img/icons.png") no-repeat -100px -44px;

}
#service .service3 dt:nth-child(1){
	background: url("../img/icons.png") no-repeat -152px -44px;

}
#service .service4 dt:nth-child(1){
	background: url("../img/icons.png") no-repeat -200px -41px;

}
#service dl .dd1{
	position: absolute ;
	top: 30px;
	left: 60px;
	font-weight: bold;

}
#service dl .dd2{
	position: absolute ;
	top: 50px;
	left: 60px;
	color: #aaa;
	font-size: 12px;

}
#service li{
	float: left;
	margin: 0px 10px;
	transition:all 0.3s linear ;
}
#service li:hover{
	transform: translateY(-10px);
}
#service ul{
	width: 1110px;
	margin: 0 auto;
	height: 100px;
	border-bottom: 1px solid #666;
}

Realization effect ：