网页制作模仿（7）

做红框部分，这是分为两部分，分别为左部分和右部分。

 html代码如下：

<div class="w help">
				<div class="fl">
					<dl>
						<dt>购物指南</dt>
						<dd>
							<a href="#">购物流程</a>
						</dd>
						<dd>
							<a href="#">会员介绍</a>
						</dd>
						<dd>
							<a href="#">生活旅行</a>
						</dd>
						<dd>
							<a href="#">常见问题</a>
						</dd>
						<dd>
							<a href="#">大家电</a>
						</dd>
						<dd>
							<a href="#">联系客服</a>
						</dd>
					</dl>
					<dl>
						<dt>配送方式</dt>
						<dd>
							<a href="#">上门自提</a>
						</dd>
						<dd>
							<a href="#">211限时达</a>
						</dd>
						<dd>
							<a href="#">配送服务查询</a>
						</dd>
						<dd>
							<a href="#">配送费收取标准</a>
						</dd>
						<dd>
							<a href="#">海外配送</a>
						</dd>
					</dl>
					<dl>
						<dt>支付方式</dt>
						<dd>
							<a href="#">货到付款</a>
						</dd>
						<dd>
							<a href="#">在线支付</a>
						</dd>
						<dd>
							<a href="#">分期付款</a>
						</dd>
						<dd>
							<a href="#">公司转账</a>
						</dd>
					</dl>
					<dl>
						<dt>售后服务</dt>
						<dd>
							<a href="#">售后政策</a>
						</dd>
						<dd>
							<a href="#">价格保护</a>
						</dd>
						<dd>
							<a href="#">退款说明</a>
						</dd>
						<dd>
							<a href="#">返修/退换货</a>
						</dd>
						<dd>
							<a href="#">取消订单</a>
						</dd>
					</dl>
					<dl>
						<dt>特色服务</dt>
						<dd>
							<a href="#">夺宝岛</a>
						</dd>
						<dd>
							<a href="#">DIY装机</a>
						</dd>
						<dd>
							<a href="#">延保服务</a>
						</dd>
						<dd>
							<a href="#">京东E卡</a>
						</dd>
						<dd>
							<a href="#">京东通信</a>
						</dd>
						<dd>
							<a href="#">京鱼座智能</a>
						</dd>
					</dl>
				</div>
				<div class="fr cover">
					<h5>京东自营覆盖区县</h5>
					<p>京东已向全国2661个区县提供自营配送服务，支持货到付款，POS机刷卡，和售后上门服务</p>
					<a href="https://help.jd.com/user/issue/103-983.html">查看详情</a>
				</div>
			</div>

css代码：

.help{
	height: 200px;
	border-bottom: 1px solid #DEDEDE;
	padding-top: 25px;
	box-sizing: border-box;
}
.help dl{
	width: 192px;
	float: left;
}
.help dt{
	font-size: 14px;
	color: #666;
	height: 30px;
	font-weight: 600;
}

.help dd{
	height: 22px;
}
.help dd a{
	color: #555;
}
.cover{
	width: 200px;
	height: 150px;
}
.cover h5{
	padding-left: 35px;
	font-size: 14px;
	height: 30px;
	color: #666;
}
.cover p{
	width: 180px;
	font-size: 12px;
	 color:#666;
	line-height: 18px;
}
.cover a{
	margin-left: 130px;
	color:#666;
}
.cover a:hover{
	color: #f10215;
}
.help a:hover{
	color: #f10215;
}