仿京东页面底部

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 636 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

该博客介绍了如何使用HTML和CSS来仿制京东页面底部的布局。通过HTML代码创建基本结构，然后利用CSS进行定位，实现多快好省四张图片的精准放置。虽然HTML中的超链接没有实际功能，但可以通过修改代码赋予其实际用途。

HTML代码

			<!-- 底部开始 -->
			<div class="footer">
				<!-- 服务部分 -->
				<div class="footer-service">
					<div class="w service-inner">
						<ul>
							<li>
								<div class="service-unit">
									<h5>多</h5>
									<p>品类齐全，轻松购物</p>
								</div>

							</li>
						</ul>
						<ul>
							<li>
								<div class="service-unit">
									<h5 class="kuai">快</h5>
									<p>多仓直发，极速配送</p>
								</div>

							</li>
						</ul>
						<ul>
							<li>
								<div class="service-unit">
									<h5 class="hao">好</h5>
									<p>正品行货，精致服务</p>
								</div>

							</li>
						</ul>
						<ul>
							<li>
								<div class="service-unit">
									<h5 class="sheng">省</h5>
									<p>天天低价，畅选无忧</p>
								</div>

							</li>
						</ul>
					</div>
				</div>
				<!-- 帮助 -->
				<div class="w help">
					<div class="mod_help_nav">
						<h5 class="mod_help_nav_tit">购物指南</h5>
						<ul class="mod_help_nav_con">
							<li><a href="//help.jd.com/user/issue/list-29.html" target="_blank" rel="noopener noreferrer">购物流程</a></li>
							<li><a href="//help.jd.com/user/issue/list-151.html" target="_blank" rel="noopener noreferrer">会员介绍</a></li>
							<li><a href="//help.jd.com/user/issue/list-297.html" target="_blank" rel="noopener noreferrer">生活旅行</a></li>
							<li><a href="//help.jd.com/user/issue.html" target="_blank" rel="noopener noreferrer">常见问题</a></li>
							<li><a href="//help.jd.com/user/issue/list-136.html" target="_blank" rel="noopener noreferrer">大家电</a></li>
							<li><a href="//help.jd.com/user/custom.html" target="_blank" rel="noopener noreferrer">联系客服</a></li>
						</ul>
					</div>
					<div class="mod_help_nav">
						<h5 class="mod_help_nav_tit">配送方式</h5>
						<ul class="mod_help_nav_con">
							<li><a href="//help.jd.com/user/issue/list-81-100.html" target="_blank" rel="noopener noreferrer">上门自提</a></li>
							<li><a href="//help.jd.com/user/issue/list-81.html" target="_blank" rel="noopener noreferrer">211限时达</a></li>
							<li><a href="//help.jd.com/user/issue/103-983.html" target="_blank" rel="noopener noreferrer">配送服务查询</a></li>
							<li><a href="//help.jd.com/user/issue/109-188.html" target="_blank" rel="noopener noreferrer">配送费收取标准</a></li>
							<li><a href="//help.joybuy.com/help/question-list-201.html" target="_blank" rel="noopener noreferrer">海外配送</a></li>
						</ul>
					</div>
					<div class="mod_help_nav">
						<h5 class="mod_help_nav_tit">支付方式</h5>
						<ul class="mod_help_nav_con">
							<li><a href="//help.jd.com/user/issue/list-172.html" target="_blank" rel="noopener noreferrer">货到付款</a></li>
							<li><a href="//help.jd.com/user/issue/list-173.html" target="_blank" rel="noopener noreferrer">在线支付</a></li>
							<li><a href="//help.jd.com/user/issue/list-176.html" target="_blank" rel="noopener noreferrer">分期付款</a></li>
							<li><a href="//help.jd.com/user/issue/list-175.html" target="_blank" rel="noopener noreferrer">公司转账</a></li>
						</ul>
					</div>
					<div class="mod_help_nav">
						<h5 class="mod_help_nav_tit">售后服务</h5>
						<ul class="mod_help_nav_con">
							<li><a href="//help.jd.com/user/issue/321-981.html" target="_blank" rel="noopener noreferrer">售后政策</a></li>
							<li><a href="//help.jd.com/user/issue/list-132.html" target="_blank" rel="noopener noreferrer">价格保护</a></li>
							<li><a href="//help.jd.com/user/issue/130-978.html" target="_blank" rel="noopener noreferrer">退款说明</a></li>
							<li><a href="//myjd.jd.com/repair/repairs.action" target="_blank" rel="noopener noreferrer">返修/退换货</a></li>
							<li><a href="//help.jd.com/user/issue/list-50.html" target="_blank" rel="noopener noreferrer">取消订单</a></li>
						</ul>
					</div>
					<div class="mod_help_nav">
						<h5 class="mod_help_nav_tit">特色服务</h5>
						<ul class="mod_help_nav_con">
							<li><a href="//1paipai.jd.com/">夺宝岛</a></li>
							<li><a href="//help.jd.com/user/issue/list-134.html">DIY装机</a></li>
							<li><a href="//fuwu.jd.com/">延保服务</a></li>
							<li><a href="//o.jd.com/market/index.action">京东E卡</a></li>
							<li><a href="//mobile.jd.com/">京东通信</a></li>
							<li><a href="//smart.jd.com/">京鱼座智能</a></li>
						</ul>
					</div>
					<div class="mod_help_cover">
						<h5 class="mod_help_cover_tit">京东自营覆盖区县</h5>
						<div class="mod_help_cover_con">
							<p class="mod_help_cover_info">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
							<p class="mod_help_cover_more"><a href="//help.jd.com/user/issue/103-983.html">查看详情></a></p>
						</div>
					</div>
				</div>
			</div>

里面的超链接没实际作用，可以自行删除。

效果图

在这里插入图片描述
这里要用定位将多快好省四张图定位在合适的位置。

css代码

/* <!-- 底部开始 --> */
.footer{
	height: 560px;
	
}
.footer-service{
	height: 100px;
	border-bottom: 1px solid #e1e1e1;
}
.service-inner{
	/* background-color: #008000; */
	padding: 30px 0;
}
.service-inner li{
	width: 297px;
	height: 42px;
	
	float: left;
}
.service-inner ul{
	height: 42px;
	float: left;
}
.service-unit{
	width: 225px;
	height: 42px;
	margin: 0 auto;
}
.service-unit h5{
	width: 36px;
	height: 42px;
	background-image: url(../img/bottom.png);
	position: absolute;
	top: 280px;
	text-indent: -9999px;
	background-position: 0 -192px;
}
.service-unit p{
	line-height: 42px;
	font-size: 18px;
	margin-left: 45px;
	font-weight: 700;
}
.service-unit  .kuai{
	background-position: -41px -192px;
}
.service-unit  .hao{
	background-position: -82px -192px;
}
.service-unit  .sheng{
	background-position: -123px -192px;
}
/* <!-- 帮助 --> */
.help{
	height: 180px;
	padding-top: 20px;
	
}
.help a{
	color: #666;
	font-size: 12px;
}
.help a:hover{
	color: crimson;
}
.help h5{
	color: #666;
	font-size: 16px;
}
.help p{
	color: #666;
	margin-top: 20px;
	font-size: 15px;
}
.mod_help_nav {
    float: left;
    width: 198px;
    line-height: 22px;
}
.mod_help_nav_tit {
    margin-bottom: 20px;
    font-size: 14px;
	}