仿京东页面底部

最新推荐文章于 2025-07-27 18:02:09 发布

Puppet Heart

最新推荐文章于 2025-07-27 18:02:09 发布

阅读量619

点赞数

CC 4.0 BY-SA版权

文章标签： html css

本文链接：https://blog.youkuaiyun.com/PuppetHeart/article/details/121239276

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.