综合设计一个OPPE主页--页面服务部分

分析：五个部分 形式相同 除了内容不同 ---------------使用列表做-ul-li

 每一个列表里面都有图片和文字 ------图文混排----使用dl-----dt图片 dd文字

HTML 

	<!-- 页面的服务部分 -->
	<div id="service">
		<div class="container">
			<ul>
				<li class="service0">
					<dl>
						<dt></dt>
						<dd class="dd1">正品保障</dd>
						<dd class="dd2">所有商品都是原装的</dd>
					</dl>
				</li>
				<li class="service1">
					<dl>
						<dt></dt>
						<dd class="dd1">79元起包邮</dd>
						<dd class="dd2">高效的物流直达配送</dd>
					</dl>
				</li>
				<li class="service2">
					<dl>
						<dt></dt>
						<dd class="dd1">7天退换货</dd>
						<dd class="dd2">支持7天退货，30天换货</dd>
					</dl>
				</li>
				<li class="service3">
					<dl>
						<dt></dt>
						<dd class="dd1">285自提点</dd>
						<dd class="dd2">轻松自在，覆盖各大城市</dd>
					</dl>
				</li>
				<li class="service4">
					<dl>
						<dt></dt>
						<dd class="dd1">365家客服网点</dd>
						<dd class="dd2">所有商品都是原装的</dd>
					</dl>
				</li>
			</ul>
		</div>
	</div>

 CSS

/**************************************************
*****************页面的服务部分的样式**************
***************************************************/
#service{
	height: 100px;
	background-color: #fff;

}
#service dl{
	width: 200px;
	height: 100px;
	/*border: 1px solid #000;*/
	position: relative; /*为了下面的图片部分定位使用relative*/
}
#service dl dt{ /*图片部分*/
	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;
}

实现效果：