京东首页项目(3)---底部模块实现

2年前 (2022) 程序员胖胖胖虎阿

520 0 0

京东首页项目(3)---底部模块实现

有关京东首页项目之前已经写了两篇博客：

1、京东首页项目(1)---总述

2、京东首页项目(2)---顶部模块实现

这篇就开始写京东首页页面底部分。这篇所需完成的工作如下：

京东首页项目(3)---底部模块实现

这里一共完成3个部分，1、多快好省模块 2、帮助模块 3、版权模块。

一、多快好省模块

这个模块主要是2部分:

文字部分（浮动实现）
图片部分（绝对定位实现）

如图

京东首页项目(3)---底部模块实现

html部分

        <div class="footer-service">  
                <div class="w footer-service-inner">
                    <ul class="clearfix">
                         <li>
                              <div class="service_unit">
                                   <h5>多</h5>             <!-- 图片部分 -->
                                   <p>品类齐全，轻松购物</p> <!-- 文字部分 -->
                              </div>
                         </li>
                         <li>
                              <div class="service_unit">
                                   <h5 class="kuai">快</h5>
                                   <p>多仓直发，极速配送</p>
                              </div>
                         </li>  
                         <li>
                              <div class="service_unit">
                                   <h5 class="hao">好</h5>
                                   <p>正品行货，精致服务</p>
                              </div>
                         </li>
                         
                         <li>
                              <div class="service_unit">
                                   <h5 class="sheng">省</h5>
                                   <p>天天低价，畅选无忧</p>
                              </div>
                         </li>
                    </ul>
                </div>
            </div>

css部分

.footer-service {                  /*1、多快好省模块*/
	border-bottom: 1px solid #DEDEDE; /*设置底部样式*/
}
.footer-service-inner {  
	padding: 30px 0;

}
.footer-service-inner li {  
	float: left;
	width: 297px;
	height: 42px;
}
.service_unit {
	width: 225px;
	height: 42px;
	margin: 0 auto;
	position: relative;
}
.service_unit h5 {
	width: 36px;
	height: 42px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/ico_service.png) no-repeat;
	text-indent: -999px;
	overflow: hidden;
}
.service_unit p {
	line-height: 42px;
	margin-left: 45px;
	font-size: 18px;
	font-weight: 700;

}
.service_unit .kuai {
	background-position: 0 -44px;
}
.service_unit .hao {
	background-position: 0 -86px;
}
.service_unit .sheng {
	background-position: 0 -128px;
}

二、帮助模块模块

这个模块分为3部分:

购物指南（左浮动实现）
京东自营覆盖区县（右浮动+定位实现)

如图

京东首页项目(3)---底部模块实现

HTML部分

  <div class="w help">
                    <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="#">会员介绍</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="#">会员介绍</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="#">会员介绍</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="#">会员介绍</a></dd>
                         <dd><a href="#">生活旅行</a></dd>
                         <dd><a href="#">常见问题</a></dd>
                         <dd><a href="#">大家电</a></dd>
                         <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl class="cover">
                         <dt>京东自营覆盖区县</dt>
                         <dd class="info">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
                         </dd>
                         <dd class="more"><a href="#">查看详情 > </a></dd>
                         
                    </dl>
            </div>

CSS部分

.help {                   /*2、帮助模块*/
	height: 180px;
	/* background-color: pink; */
	padding-top: 20px;
}
.help dl {
	float: left;
	width: 195px;
}
.help dt {
	font-size: 14px;
	font-weight: 700;
	color: #666;
	height: 30px;
}
.help dd {
	height: 22px;
}
.help dd a{
	color: #727272;
	font-size: 12px;
}
.help dd a:hover {
	color: #f10215;
}

.help .cover {
	float: right;
	width: 207px;
	height: 150px;
	background: url(../images/ico_footer.png) no-repeat;
}
.cover dt {
	text-align: center;
}
.help .info {
	width: 175px;
	height: 50px;
	font-size: 12px;
	margin-top: 5px;
	margin-left: 10px;
	line-height: 18px;
	color: #727272;
}
.more {
	text-align: right;
	padding-right: 10px;
}

三、版权模块

这个模块分为3部分

关于我们
京公网安备
图片

如图

京东首页项目(3)---底部模块实现

html部分

 <div class="w copyright">               
                    <div class="links">
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         
                         <a href="#">English</a>
                         <span>|</span>
                         <a href="#">Site</a>
                         <span>|</span>
                         <a href="#">Media & IR</a>
                         <span>|</span>
                    </div>

                    <div class="c-info">
                         <p>京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号</p>
                         <p>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155</p>
                         <p>Copyright © 2004 - 2017  京东JD.com 版权所有|消费者维权热线：4006067733经营证照</p>
                         <p>京东旗下网站：京东支付|京东云</p>
                    </div>
                    <div class="tupian">
                         <a href="#"></a>
                         <a href="#" class="kexin"></a>
                         <a href="#"></a>
                         <a href="#"></a>
                         <a href="#"></a>
                         <a href="#"></a>
                    </div>
          </div>

CSS部分

.copyright {          /*3、版权模块*/
	border-top: 1px solid #ccc;
	padding-top: 15px;
}
.links {
	text-align: center;
}
.links a {
	color: #727272;
	font-size: 12px;
}
.links span {
	font-size: 12px;
	color: #D4CDCD;
	margin: 0 6px;
}
.c-info {
	font-size: 12px;
	color: #9E9E9B;
	text-align: center;
	line-height: 20px;
	margin-top: 10px;
}
.tupian {
	text-align: center;
	margin-top: 10px;
}
.tupian a{
	width: 103px;
	height: 32px;
	display: inline-block;
	background: url(../images/ico_footer.png) no-repeat 0 -151px;
}
.tupian .kexin {
	background-position: -104px -151px;
}

你如果愿意有所作为，就必须有始有终。(13)

版权声明：程序员胖胖胖虎阿发表于 2022年9月16日下午6:40。
转载请注明：京东首页项目(3)---底部模块实现 | 胖虎的工具箱-编程导航

相关文章

windows/mac idea最新破解教程(Intellij IDEA最新永久激活码,永久激活IDEA)

程序员胖胖胖虎阿

183

CYQ.Data 快速开发EasyUI

程序员胖胖胖虎阿

162

IDEA2021激活码(IntelliJ IDEA2022破解图文教程,永久有效)

程序员胖胖胖虎阿

515

IDEA永久激活破解教程(IDEA全新激活破解教程,亲测有效!!)

程序员胖胖胖虎阿

307

idea的2019永久激活码(IDEA2021激活工具全年更新)

程序员胖胖胖虎阿

317

Spring Boot2 系列教程(七)理解自动化配置的原理

程序员胖胖胖虎阿

153

暂无评论

暂无评论...

致力于称为最好的程序员导航网站

友链申请免责声明关于我们

Copyright © 2022 胖虎的工具箱-编程导航 陇ICP备2022001249号