【两天搞定小米商城】【第九步】小米商城之尾部部分

已于 2022-08-03 20:22:19 修改
阅读量309 收藏 5
点赞数
文章标签： css html 前端
于 2022-08-03 20:20:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhou20002000/article/details/126148081
版权

效果图：

在这里插入图片描述(我做的和官网有些许差距，确实拉胯~)

HTML:

 <!-- 页脚开始 -->
    <div class="footer">
        <div class="site-footer">
            <div class="wrap">
                <div class="footer-service">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe629;</i>
                                <span>预约维修服务</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe629;</i>
                                <span>七天无理由退货</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe629;</i>
                                <span>15天免费换货</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe629;</i>
                                <span>满69包邮</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont">&#xe629;</i>
                                <span>1100余家售后网点</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="footer-links">
                    <ul>
                        <li>
                        选购指南
                        </li>
                        <li>
                            <a href="#">手机</a>
                        </li>
                        <li>
                            <a href="#">电视</a>
                        </li>
                        <li>
                            <a href="#">笔记本</a>
                        </li>
                        <li>
                            <a href="#">平板</a>
                        </li>
                        <li>
                            <a href="#">穿戴</a>
                        </li>
                        <li>
                            <a href="#">耳机</a>
                        </li>
                        <li>
                            <a href="#">家电</a>
                        </li>
                        <li>
                            <a href="#">路由器</a>
                        </li>
                        <li>
                            <a href="#">音箱</a>
                        </li>
                        <li>
                            <a href="#">配件</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                        服务中心
                        </li>
                        <li>
                            <a href="#">申请售后</a>
                        </li>
                        <li>
                            <a href="#">售后政策</a>
                        </li>
                        <li>
                            <a href="#">维修服务价格</a>
                        </li>
                        <li>
                            <a href="#">订单查询</a>
                        </li>
                        <li>
                            <a href="#">以旧换新</a>
                        </li>
                        <li>
                            <a href="#">保障服务</a>
                        </li>
                        <li>
                            <a href="#">防伪查询</a>
                        </li>
                        <li>
                            <a href="#">F码通道</a>
                        </li>
                       
                    </ul>
                    <ul>
                        <li>
                            线下门店
                        </li>
                        <li>
                            <a href="#">小米之家</a>
                        </li>
                        <li>
                            <a href="#">服务网点</a>
                        </li>
                        <li>
                            <a href="#">授权体验店/专区</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            关于小米
                        </li>
                        <li>
                            <a href="#">了解小米</a>
                        </li>
                        <li>
                            <a href="#">加入小米</a>
                        </li>
                        <li>
                            <a href="#">投资者关系</a>
                        </li>
                        <li>
                            <a href="#">环境，社会及管治</a>
                        </li>
                        <li>
                            <a href="#">廉洁举报</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            关注我们
                        </li>
                        <li>
                            <a href="#">新浪微博</a>
                        </li>
                        <li>
                            <a href="#">官方微信</a>
                        </li>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                        <li>
                            <a href="#">公益基金会</a>
                        </li>
                        
                    </ul>
                    <div class="contact">
                        <p class="tel">400-100-5678</p>
                        <p class="time">8:00-18:00（仅收市话费）</p>
                        <a href="#" class="kefu"><i class="iconfont">人工客服</i></a>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-info">
            <div class="wrap">
                <div class="footer-logo">
                    <img src="../images/logo-mi2.png" alt="">
                </div>
                <div class="sites">
                    <p class="one">  <li><a href="#">小米商城<span>|</span></a></li>
                        <li><a href="#">MIUI<span>|</span></a></li>
                        <li><a href="#">loT<span>|</span></a></li>
                        <li><a href="#">有品<span>|</span></a></li>
                        <li><a href="#">小爱开放平台<span>|</span></a></li>
                        <li><a href="#">资质证照<span>|</span></a></li>
                        <li><a href="#">协议规划<span>|</span></a></li>
                        <li><a href="#">下载app<span>|</span></a></li>
                        <li><a href="#">小米商城<span>|</span></a></li>
                        <li><a href="#">MIUI<span>|</span></a></li>
                        <li><a href="#">loT<span>|</span></a></li>
                        <li><a href="#">有品<span>|</span></a></li>
                        <li><a href="#">小爱开放平台<span>|</span></a></li>
                        <li><a href="#">资质证照<span>|</span></a></li>
                        <li><a href="#">协议规划<span>|</span></a></li>
                        <li><a href="#">下载app<span>|</span></a></li>
                        <li><a href="#">小米商城<span>|</span></a></li>
                        <li><a href="#">MIUI<span>|</span></a></li>
                        <li><a href="#">loT<span>|</span></a></li>
                        <li><a href="#">有品<span>|</span></a></li>
                        <li><a href="#">小爱开放平台<span>|</span></a></li>
                        <li><a href="#">资质证照<span>|</span></a></li>
                        <li><a href="#">协议规划<span>|</span></a></li>
                        <li><a href="#">下载app<span>|</span></a></li>
                        
                        </p>

                    <p> mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
                        （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                        增值电信业务许可证 网络食品经营备案 京食药网食备202010048   食品经营许可证<br>
                        违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </br>
                    </p>

                    <p>
                    <img src="../images/truste.png" alt="">
                    <img src="../images/v-logo-2.png" alt="">
                    <img src="../images/icon3.png" alt="">
                    <img src="../images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                    <img src="../images/f1ee261b96ae71e845efba398efeca02.png" alt="">
                    </p>
                </div>
                <img src="../images/slogan2020.png" alt="" class="slogan">
            </div>
        </div>

    </div>
    <!-- 页脚结束 -->

（提示一下，不要忘了主体部分有两个大div包括）

CSS:

/* 页脚样式开始 */
.site-footer{
    width: 100%;
    height: 473px;

}
.site-info{
    width: 100%;
    height: 206px;
    padding: 30px 0;
    background-color: #fafafa;
}
.footer-service{
    width: 100%;
    height: 25px;
    padding: 27px 0;
    border-bottom: 1px solid #e0e0e0;
}
.footer{
    width: 100%;
    height: 1000px;
}
.footer-service li{
   width: 190px;
   float: left;
   height: 25px;
   line-height: 25px;
  margin-left: 50px;
   border-right: 1px solid #e0e0e0;
}
.footer-service li:last-child{
    border-right: none;
}
.footer-service a{
    color:#616161 ;
    transition: all .2s;
}
.footer-service a:hover{
    color: #ff6700;
}
.footer-service i{
    font-size: 24px;
    margin-right: 6px;
}
.footer-links{
    width: 100%;
    height: 472px;
    padding: 40px 0;
    margin-left: 170px;
    font-size: 14px;
    color: #424242;

}
.footer-links ul{
    float: left;
    width: 160px;
    text-align: left;

}

.footer-links a{
    color: #757575;
    font-size: 12px;
}
.footer-links li{
    height: 18px;
    margin-top: 10px;
}
.footer-links li:first-child{
    height: 17px;
    line-height: 17.5px;
    margin: -1px 0 26px;
}
.footer-links a:hover{
    color: #ff6700;
}
.contact{
    width: 251px;
    height: 111px;
    border-left: 1px solid #b0b0b0;
    float:right;
   margin-right: 173px;
}
.tel{
    color: #ff6700;
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 5px;
    text-align: center;
}
.time{
    color:#616161 ;
    font-style: 5px;
    margin-top: 10px;
    text-align: center;
}
.contact .kefu{
    width: 118px;
    height: 28px;
    display: block;
    margin: 0 auto;
    border: 1px solid #ff6700;
    color: #ff6700;
    line-height: 28px;
    font-style: 12px;
    transition: all .4s;
    margin-top: 10px;
}
.contact .kefu:hover{
    background-color: #ff6700;
    color: #fff;
}
.footer-logo{
    width: 56px;
    height: 56px;
    margin-right: 10px;
    float: left;

}
.footer-logo img{
    width: 100%;
}
.sites{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1160px;
    height: 250px;
    font-size: 12px;
    line-height: 18px;
}
.one:hover a{
    color: #ff6700;
}


.sites p{
    color: #b0b0b0;
   
}


.sites p:nth-child(2) a{
    color: #b0b0b0;
    
}

.sites p:last-child{
    /* background-color: green; */
    padding-right: 500px;
    margin-top: 5px;
    align-items: ;
}
.sites img{
    height: 28px;
  
}
.slogan{
    margin-top: -50px;
   margin-left: 380px;
}
/* 页脚样式结束 */

这是我做小米商城的第一步博客地址：

https://blog.csdn.net/zhouzhou20002000/article/details/126143295?spm=1001.2014.3001.5502

心碎南瓜粥
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端期末节课大作业 ~小米商城官网首页模板. (功能齐全)
06-18
在这个小米商城模板中，HTML用于构建网页的基本框架，包括头部、主体和尾部等部分。例如，`<header>`定义了导航栏的位置，`<nav>`用于创建导航链接，`<section>`和`<article>`则用于组织商品展示和描述等内容。此外...
2023年最新Flutter+Getx仿小米商城项目实战视频教程-V3版
luckysuny的博客
11-24 1667
透明导航 、浮动导航、导航动画、六格验证码、Photo-view类似朋友圈图片预览、3、 Flutter Android中使用生物识别认证的一些配置。2、 Flutter中使用socket.io和服务器实现通讯。3、 Flutter中使用socket.io和服务器实现通讯。直播流程（推流、拉流）、借助腾讯云直播、自己搭建直播服务器、4、 Flutter Ios中使用生物识别认证的一些配置。二、 AP模式下Flutter和Wifi模块的数据穿透演示。、Flutter 事件驱动、Flutter本地存储。
Flutter仿京东商城项目实战视频教程
dream_comer的博客
07-08 6984
Flutter仿京东商城项目实战视频教程 网盘地址 提取码：zae8 Flutter仿京东商城项目实战视频教程包括Dart入门基础教程14讲、Flutter基础、Flutter Native、Flutter仿京东商城项目(真实Api接口、真实交互、真实企业级项目实战)、Flutter打包android应用、Flutter打包ios应用、上传Appstore、Flutter常见插件、以及Fl...
Flutter+Getx仿小米商城项目实战教程又新增了Flutter调用原生地图
最新发布
yuanlaile的博客
05-15 374
Flutter+Getx仿小米商城项目实战教程基于Flutter3.x录制，课程紧贴企业需求，目前已完结176讲。教程所讲内容支持Android、Ios、华为鸿蒙OS，教程更新于2024年4月09日新增 Flutter 调用百度地图、新增Flutter充电桩项目地图实战。支持2024年3月29日更新的Flutter 3.19.5以及之前的所有版本。
Flutter小米商城
不负韶华梦为马
10-01 608
原因： 使用Android Studio创建的项目, 安卓包名自动配置好了。把提示路径加入到环境变量中。
flutter之从零搭建小米商城APP总纲
yuanqi3131的博客
01-07 534
一、前言 入手flutter，真的脑壳痛，因为文档讲的太简单了，意思是没例子，就属性告诉你，用法不知道用，然后文档写的对新手真的太难了，完成不是一步步让你去了解，所以心情是一边百度谷歌，一边骂，然后就光看文档你根本就学不到啥，所以要做点东西，就入手小米商城APP，做一个简易版的，因为刚做，先来个最初的样子吧，现在做的只是安卓的，ios等以后在测试兼容吧，第一张截图是小米商城的，第二张是我的，还在做...
耗时两天，Html实现小米官网
The_RedMaple的博客
07-21 1万+
实现展示： 代码总共 808行 ，其中实现了小米官网外观布局的大部分。 网址和图标 类似的菜单也可以实现下拉 透明度为0.3 每一个地方都是超链接，可以进行点击 搜索栏获得焦点后会变颜色 光标停留也有响应特效 相关的图片和代码 实现代码： html 代码 <html> <head> <meta charset="utf-8"> <title>小米商城</title> <
小米商城HTML-CSS
07-05
【小米商城HTML-CSS】项目是一个适合初学者实践的网页设计练习，主要涵盖了HTML和CSS这两门基础的前端技术。这个项目旨在帮助学习者通过实际操作来熟悉网页布局、样式设计以及交互效果的实现。 HTML（HyperText ...
电子商城源码（Python+Django）.rar
04-13
商品搜索功能、网站导航、广告轮播、商品分类热销、网站尾部 商品列表页 4个功能区：商品搜索功能、网站导航、商品分类、商品列表信息 商品详细页 5个功能区：商品搜索功能、网站导航、商品基本信息、商品详细介绍...
安信多用户商城(免费无限版) v9.5.1
01-01
《安信多用户商城(免费无限版) v9.5.1》是一款为电商创业者设计的全面、免费的在线商城系统。此版本不仅包含了基本的电子商务功能，还新增了手机APP、手机WAP和微网站等移动应用模块，旨在提供全方位的购物体验，...
HTML5响应式室内家具电商商城模板.zip
10-24
4. **页面结构**: 模板中的每个HTML文件都包含了头部（header）、主体（main）和尾部（footer）部分，分别承载导航菜单、主要内容和底部信息。此外，还可能包含JavaScript和CSS文件链接，用于实现动态效果和样式控制...
2017小米商城完整版源码
03-16
2017小米商城完整版源码，内含配置安装文档 小米商城 小米商城
小米商城——HTML，CSS（附：源码）
致未来的你。的博客
11-01 8933
接下来是我自己的一点个人的感受，我们都知道，写一个网页的时候，我们都要从他的名称，每个标签的命名等等开始，很遗憾，我第一次写这样的代码的时候，就没有发现这样的一个问题。因此，在这里给一个很宝贵的意见就是，以后再写代码的时候一定要自己的写注释。因为代码是你自己写的，过一段时间，我们就会忘记，当时的结构和命名规则，所以在这里一定要自己写注释。大家好，作为刚接触前端不久的一个学生来说，我第一次学习完HTML5和CSS的时候，我就自己学习着自己做了一个小米官网，之前一直没有展现出来，最近一直写博客，这才想起来。
小米商城html+css+js全代码
热门推荐
weixin_57774021的博客
03-21 1万+
小米商城全代码，供参考，互相学习
小米商城静态页面html+css
m0_57093454的博客
02-26 1592
实现的结果与原版有些差异，毕竟没用上js,很多效果都只能低配版实现 不得不说细节拉满hhhh,如果基础不扎实很可能顶部导航框就卡半天hhh，遇到下拉框更是会直接懵掉，有很多细节的东西需要用伪类去处理，比如左下角的六个框里其实是有细线的用::after和::before 去处理效果会更好 想知道一些动态细节的朋友们去官网看就好了，有疑问可以交流 效果图: 基础配置: /* 公共样式 */ .clearfix::before, .clearfix::afer{ content:"
小米商城侧边栏的实现-HTML
qq_45674520的博客
06-15 1909
html实现小米商城侧边栏。
HTML+CSS静态页面的实战练习——小米商城
qq_53385064的博客
04-19 3433
跟着Pink老师学完HTML+CSS后试着写了一个小米商城首页项目，虽然过程曲折，但是结果还是不错的，做项目的过程就是总结归纳知识点，让学过的东西能更加熟练的运用； 页面部分截图： 项目的搭建： HTML部分代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-...
小米商城html/css
Moerin_的博客
08-18 333
小米商城导航条
CSS+HTML静态网页——小米官网（附源代码）
Jsheep91的博客
03-22 9660
链接：https://pan.baidu.com/s/1Bhq1GEZBCH3USx_Tj31jiA?
1.12 项目实战-商城官网实现（二）.pdf
10-27
本章节主要涵盖了四个关键部分：头部和尾部的处理、侧边栏样式处理、标题栏和面包屑导航样式处理以及精灵图的使用。 在项目实践中，首先讲解了如何处理“关于我们”页面的头部和尾部样式。学习者需要将`index.html`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值