前言
- 本demo会在文章结尾附上所有素材和源码
- 笔者是跟随B站视频上教程编写该demo,当然有自己的东西在里面和他有些不一样,比如侧边栏模块。但是大体都差不多,附上视频地址链接: 前端Web小米商城项目
- 虽然只是一个不起眼的小首页仿写,但是是笔者从0到1自己手撸的,所以还是请遵循转载协议(虽然也没人会看哈哈)
- 本demo运用到了较多的文字图标icon,全部来源于阿里图标矢量库 iconfont
- 其余所有图片素材,均为小米官网自行下载,如有侵权,联系删除
界面展示
顶部导航栏
-
黑色导航栏
- 购物车悬停展示
- 下载二维码悬停展示
- 购物车悬停展示
-
白色导航栏
- 鼠标悬停展示
- 鼠标悬停展示
- 鼠标悬停展示
轮播图
- 图片添加过渡和动画自动播放
- 鼠标悬停标签栏展示商品栏
- 广告位
网站主体内容
- 重复内容较多,这里只放耦合部分
网站底部
侧边导航栏
- 侧边导航栏,固定到界面(display:fixed),不会随着界面的滚动而移动
源码及素材
- 部分代码截图
- html部分
<!-- 黑色导航栏 --> <div class="black-nav"> <!-- 导航栏版心 --> <div class="wrap"> <ul class="left-nav"> <li><a href="#">小米官网</a><span>|</span></li> <li><a href="#">小米商城</a><span>|</span></li> <li><a href="#">MIUI</a><span>|</span></li> <li><a href="#">loT</a><span>|</span></li> <li><a href="#">云服务</a><span>|</span></li> <li><a href="#">天星数科</a><span>|</span></li> <li><a href="#">有品</a><span>|</span></li> <li><a href="#">小爱开放平台</a><span>|</span></li> <li><a href="#">企业团购</a><span>|</span></li> <li><a href="#">资质证照</a><span>|</span></li> <li><a href="#">协议规则</a><span>|</span></li> <li> <a href="#">下载app</a> <!-- 小三角 --> <div class="triangle"></div> <!-- 二维码 --> <div class="download"> <img src="./images/download.png" alt=""> <p>小米商城APP</p> </div> <span>|</span> </li> <li><a href="#"> Select Location</a></li> </ul> <ul class="right-nav"> <li><a href="#">登录</a><span>|</span></li> <li><a href="#">注册</a><span>|</span></li> <li><a href="#">消息通知</a></li> <li class="cart"> <a href="#"><i class="iconfont"></i>购物车(0)</a> <!-- 购物车的悬停显示 --> <div class="cart-list"> 购物车中还没有商品,赶紧选购吧! </div> </li> </ul> </div> </div> <!-- 白色导航栏 --> <div class="white-header"> <div class="wrap"> <!-- 小米logo --> <div class="mi-logo"> <div class="logo"> <a href="#"> <img src="./images/logo-mi2.png" alt=""> </a> </div> </div> <!-- 导航栏 --> <div class="middle-nav"> <ul class="nav"> <li> <a href="#">Xiaomi手机</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt=""> </div> <p class="nav-name">Xiaomi 13 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt=""> </div> <p class="nav-name">Xiaomi 13 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt=""> </div> <p class="nav-name">Xiaomi 13 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt=""> </div> <p class="nav-name">Xiaomi 13 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt=""> </div> <p class="nav-name">Xiaomi 13 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt=""> </div> <p class="nav-name">Xiaomi 13 Pro</p> <p class="nav-price">4999元起</p> </a> </li> </ul> </div> </div> </li> <li> <a href="#">Redmi手机</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt=""> </div> <p class="nav-name">Redmi 12C</p> <p class="nav-price">699元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt=""> </div> <p class="nav-name">Redmi 12C</p> <p class="nav-price">699元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt=""> </div> <p class="nav-name">Redmi 12C</p> <p class="nav-price">699元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt=""> </div> <p class="nav-name">Redmi 12C</p> <p class="nav-price">699元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt=""> </div> <p class="nav-name">Redmi 12C</p> <p class="nav-price">699元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt=""> </div> <p class="nav-name">Redmi 12C</p> <p class="nav-price">699元起</p> </a> </li> </ul> </div> </div> </li> <li> <a href="#">电视</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="./images/8871821795310769c1d3896c99b12381.webp" alt=""> </div> <p class="nav-name">Redmi智能电视X55 2022</p> <p class="nav-price">2199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8871821795310769c1d3896c99b12381.webp" alt=""> </div> <p class="nav-name">Redmi智能电视X55 2022</p> <p class="nav-price">2199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8871821795310769c1d3896c99b12381.webp" alt=""> </div> <p class="nav-name">Redmi智能电视X55 2022</p> <p class="nav-price">2199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8871821795310769c1d3896c99b12381.webp" alt=""> </div> <p class="nav-name">Redmi智能电视X55 2022</p> <p class="nav-price">2199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8871821795310769c1d3896c99b12381.webp" alt=""> </div> <p class="nav-name">Redmi智能电视X55 2022</p> <p class="nav-price">2199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/8871821795310769c1d3896c99b12381.webp" alt=""> </div> <p class="nav-name">Redmi智能电视X55 2022</p> <p class="nav-price">2199元起</p> </a> </li> </ul> </div> </div> </li> <li> <a href="#">笔记本</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt=""> </div> <p class="nav-name">Xiaomi Book Air 13</p> <p class="nav-price">5399元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt=""> </div> <p class="nav-name">Xiaomi Book Air 13</p> <p class="nav-price">5399元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt=""> </div> <p class="nav-name">Xiaomi Book Air 13</p> <p class="nav-price">5399元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt=""> </div> <p class="nav-name">Xiaomi Book Air 13</p> <p class="nav-price">5399元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt=""> </div> <p class="nav-name">Xiaomi Book Air 13</p> <p class="nav-price">5399元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt=""> </div> <p class="nav-name">Xiaomi Book Air 13</p> <p class="nav-price">5399元起</p> </a> </li> </ul> </div> </div> </li> <li> <a href="#">平板</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt=""> </div> <p class="nav-name">Redmi Pad</p> <p class="nav-price">1199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt=""> </div> <p class="nav-name">Redmi Pad</p> <p class="nav-price">1199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt=""> </div> <p class="nav-name">Redmi Pad</p> <p class="nav-price">1199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt=""> </div> <p class="nav-name">Redmi Pad</p> <p class="nav-price">1199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt=""> </div> <p class="nav-name">Redmi Pad</p> <p class="nav-price">1199元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt=""> </div> <p class="nav-name">Redmi Pad</p> <p class="nav-price">1199元起</p> </a> </li> </ul> </div> </div> </li> <li> <a href="#">家电</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt=""> </div> <p class="nav-name">米家冰箱对开门610L墨羽岩</p> <p class="nav-price">2499元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt=""> </div> <p class="nav-name">米家冰箱对开门610L墨羽岩</p> <p class="nav-price">2499元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt=""> </div> <p class="nav-name">米家冰箱对开门610L墨羽岩</p> <p class="nav-price">2499元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt=""> </div> <p class="nav-name">米家冰箱对开门610L墨羽岩</p> <p class="nav-price">2499元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt=""> </div> <p class="nav-name">米家冰箱对开门610L墨羽岩</p> <p class="nav-price">2499元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt=""> </div> <p class="nav-name">米家冰箱对开门610L墨羽岩</p> <p class="nav-price">2499元起</p> </a> </li> </ul> </div> </div> </li> <li> <a href="#">路由器</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt=""> </div> <p class="nav-name">Redmi路由器AX3000</p> <p class="nav-price">219元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt=""> </div> <p class="nav-name">Redmi路由器AX3000</p> <p class="nav-price">219元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt=""> </div> <p class="nav-name">Redmi路由器AX3000</p> <p class="nav-price">219元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt=""> </div> <p class="nav-name">Redmi路由器AX3000</p> <p class="nav-price">219元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt=""> </div> <p class="nav-name">Redmi路由器AX3000</p> <p class="nav-price">219元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt=""> </div> <p class="nav-name">Redmi路由器AX3000</p> <p class="nav-price">219元起</p> </a> </li> </ul> </div> </div> </li> <li><a href="#">服务中心</a></li> <li><a href="#">社区</a></li> </ul> </div> <!-- 搜索框 --> <div class="search"> <form action=""> <input type="text" placeholder="耳机"> <button class="iconfont"></button> </form> </div> </div> </div>
源码获取
- 源码过长,所以全部打包,请自行领取,一些冗余代码太繁琐笔者没有编写,如果你比较强迫症想要完善的话,大体注释我都有写,阅读也基本上没问题,基本上是可以复制粘贴然后改素材地址就行。
- 源码网盘
- 链接:https://pan.baidu.com/s/1dnbsaVrzmZ6Yjz-V37-X0Q?pwd=5555
提取码:5555 - 文件很小,不用担心下载速度问题哈哈哈
- 链接:https://pan.baidu.com/s/1dnbsaVrzmZ6Yjz-V37-X0Q?pwd=5555