网页制作模仿（6）

 今天做红框里的内容。

1，先去京东网站，把多块好省的图片保存下来，便于css样式定位。

 2，开始写html代码

<!--这里是一个大footer，因为没写完，所以</footer>这里没显示-->
		<footer>
			<div class="service">
				<div class="w">
					<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>
			</div>

3，开始css代码

.footer{
	width: 1536px;
	height: 500px;
	margin-top: 50px;
	background-color: #EAEAEA;
}
.service{
	padding: 30px 0;
	overflow: hidden;
	border-bottom: 1px solid #DEDEDE;
}
.service ul li{
	float: left;
	position: relative;
	width: 297px;
	height: 43px;
	line-height: 43px;
}
.service ul p{
	position: absolute;
	font-weight: 700px;
	margin-left: 82px;
}
.service ul h5{
	/*这里是隐藏文本内容*/
	text-indent: -9999px;
	left:38px;
	position: absolute;
	width: 36px;
	height: 43px;
	/*给保存的图标定位*/
	background: url(../img/小图标.png);
	/*这里是多*/
	background-position:-308px -424px;
}
/*.service 下面的第二个孩子li 后代h5*/
.service li:nth-child(2) h5{
	background-position: -349px -424px;
}
/*.service 下面的第3个孩子li 后代h5*/
.service li:nth-child(3) h5{
	background-position: -390px -424px;
}
/*.service 下面的第4个孩子li 后代h5*/
.service li:nth-child(4) h5{
	background-position: -431px -424px;
}