devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5+CSS3实现小米商城_小米商城代码html

作者：AllinToyou | 2024-04-02 19:41:41

赞

踩

小米商城代码html

导言：

小米商城是自学后第一个较为完整的网页，花费了一整天的时间完成，难度不是很高，只要肯花费一定的时间就能完成！

网页构成：

1、导航栏，下拉栏

2、轮播图

3、中间块

4、商品块

5、尾部

效果成品图展示：

代码展示 

代码较多，这里只展示部分

头部代码

 html：

  1. <div class="a1">
  2.             <div class="a11">
  3.                 <ul>
  4.                     <li>
  5.                         <a href="#">小米官网</a>
  6.                     </li>
  7.                     <em>|</em>
  8.                     <li>
  9.                         <a href="#">小米商城</a>
  10.                     </li>
  11.                     <em>|</em>
  12.                     <li>
  13.                         <a href="#">MIUI </a>
  14.                     </li>
  15.                     <em>|</em>
  16.                     <li>
  17.                         <a href="#">loT</a>
  18.                     </li>
  19.                     <em>|</em>
  20.                     <li>
  21.                         <a href="#">云服务</a>
  22.                     </li>
  23.                     <em>|</em>
  24.                     <li>
  25.                         <a href="#">天星数科</a>
  26.                     </li>
  27.                     <em>|</em>
  28.                     <li>
  29.                         <a href="#">有品</a>
  30.                     </li>
  31.                     <em>|</em>
  32.                     <li>
  33.                         <a href="#">小爱开放平台</a>
  34.                     </li>
  35.                     <em>|</em>
  36.                     <li>
  37.                         <a href="#">企业团购</a>
  38.                     </li>
  39.                     <em>|</em>
  40.                     <li>
  41.                         <a href="#">资质证照</a>
  42.                     </li>
  43.                     <em>|</em>
  44.                     <li>
  45.                         <a href="#">协议规则</a>
  46.                     </li>
  47.                     <em>|</em>
  48.                     <li>
  49.                         <a href="#">下载app</a>
  50.                     </li>
  51.                     <em>|</em>
  52.                     <li>
  53.                         <a href="#">SelectLocation</a>
  54.                     </li>
  55.                 </ul>
  56.             </div>
  57.             <div class="a12">
  58.                 <div class="a121">
  59.                     <ul>
  60.                         <li>
  61.                             <a href="#">登录</a>
  62.                         </li>
  63.                         <em>|</em>
  64.                         <li>
  65.                             <a href="#">注册</a>
  66.                         </li>
  67.                         <em>|</em>
  68.                         <li>
  69.                             <a href="#">消息通知</a>
  70.                         </li>
  71.                     </ul>
  72.                 </div>
  73.                 <div class="a122">
  74.                     <div class="a1221">
  75.                         <img src="img/购物车.png" alt="" style="height: 25px;width: 25px;">
  76.                     </div>
  77.                     <div class="a1222">
  78.                         <a href="#">购物车(0)</a>
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.  
  83.  
  84.         </div>

轮播图

图片自动放映，渐变的背景图片，使用过渡

html代码

  1. <img src="img/小米页面.jpeg" style="display:none;">
  2.         <img src="img/小米页面1.jpg" style="display:none;">
  3.         <img src="img/小米页面2.jpg" style="display:none;">
  4.         <img src="img/小米页面3.jpg" style="display:none;">
  5.         <img src="img/小米页面4.jpg" style="display:none;">
  6.         <!-- // 图片预定加载 -->

导航栏代码

右侧固定栏

  1. <div class="g" style="height: 455px;width: 85px;position: fixed;right: 1px;bottom:72px;border: 1px solid #F5F5F5;background-color: #fff;">
  2.         <div class="g1" style="height: 90px;width: 100%;border-bottom: 1px solid #F5F5F5; ">
  3.             <a href="#" style="text-decoration: none;color: #757575; font-size: 14px;">
  4.                 <img src="img/手机.png" alt="" style="height: 30px;width: 30px;margin-top:20px;margin-left: 30px;">
  5.                 <span style="height: 20px;width: 40px;margin-top: 10px;margin-left: 20px;">手机APP</span>
  6.             </a>
  7.         </div>
  8.         <div style="height: 90px;width: 100%;border-bottom: 1px solid #F5F5F5; ">
  9.             <a href="#" style="text-decoration: none;color: #757575; font-size: 14px;">
  10.                 <img src="img/个人中心.png" alt="" style="height: 30px;width: 30px;margin-top:20px;margin-left: 30px;">
  11.                 <span style="height: 20px;width: 40px;margin-top: 10px;margin-left: 20px;">个人中心</span>
  12.             </a>
  13.         </div>
  14.         <div style="height: 90px;width: 100%;border-bottom: 1px solid #F5F5F5; ">
  15.             <a href="#" style="text-decoration: none;color: #757575; font-size: 14px;">
  16.                 <img src="img/售后.png" alt="" style="height: 30px;width: 30px;margin-top:20px;margin-left: 30px;">
  17.                 <span style="height: 20px;width: 40px;margin-top: 10px;margin-left: 20px;">售后服务</span>
  18.             </a>
  19.         </div>
  20.         <div style="height: 90px;width: 100%;border-bottom: 1px solid #F5F5F5; ">
  21.             <a href="#" style="text-decoration: none;color: #757575; font-size: 14px;">
  22.                 <img src="img/人工.png" alt="" style="height: 30px;width: 30px;margin-top:20px;margin-left: 30px;">
  23.                 <span style="height: 20px;width: 40px;margin-top: 10px;margin-left: 20px;">人工客服</span>
  24.             </a>
  25.         </div>
  26.         <div style="height: 90px;width: 100%; ">
  27.             <a href="#" style="text-decoration: none;color: #757575; font-size: 14px;">
  28.                 <img src="img/购物.png" alt="" style="height: 30px;width: 30px;margin-top:20px;margin-left: 30px;">
  29.                 <span style="height: 20px;width: 40px;margin-top: 10px;margin-left: 25px;">购物车</span>
  30.             </a>
  31.         </div>
  32.     </div>

左侧导航栏

html：

  1. <div class="b12">
  2.                 <ul>
  3.                     <li>
  4.                         <a href="#">Xiaomi手机</a>
  5.                     </li>
  6.                     <li>
  7.                         <a href="#">Redmi红米</a>
  8.                     </li>
  9.                     <li>
  10.                         <a href="#">电视</a>
  11.                     </li>
  12.                     <li>
  13.                         <a href="#">笔记本</a>
  14.                     </li>
  15.                     <li>
  16.                         <a href="#">平板</a>
  17.                     </li>
  18.                     <li>
  19.                         <a href="#">家电</a>
  20.                     </li>
  21.                     <li>
  22.                         <a href="#">路由器</a>
  23.                     </li>
  24.                     <li>
  25.                         <a href="#">服务中心</a>
  26.                     </li>
  27.                     <li>
  28.                         <a href="#">社区</a>
  29.                     </li>
  30.                 </ul>
  31.             </div>

 css：

  1. .box2 .b1 {
  2.     height: 100px;
  3.     width: 1226px;
  4.     margin: 0 auto;
  5.     /* background-color: pink; */
  6. }
  7.  
  8. .box2 .b1 .b11 {
  9.     float: left;
  10.     height: 100px;
  11.     width: 234px;
  12.     /* background-color: antiquewhite; */
  13. }
  14.  
  15. .box2 .b1 .b12 {
  16.     float: left;
  17.     height: 100px;
  18.     width: 700px;
  19.     /* background-color: pink; */
  20. }
  21.  
  22. .box2 .b1 .b12 ul {
  23.     margin-top: 40px;
  24. }
  25.  
  26. .box2 .b1 .b12 ul li {
  27.     list-style: none;
  28.     float: left;
  29.     margin-left: 20px;
  30. }
  31.  
  32. .box2 .b1 .b12 ul li a {
  33.     text-decoration: none;
  34.     color: #333333;
  35. }
  36.  
  37. .box2 .b1 .b12 ul li a:hover {
  38.     color: #FF6700;
  39. }

商品块代码

html

  1.  <div class="box53">
  2.             <div class="f531">
  3.                 <a href="#"><img src="img/x1.webp" alt="" style="height: 100%;width: 100%;"></a>
  4.             </div>
  5.             <div class="f532">
  6.                 <ul>
  7.                     <li>
  8.                         <img src="img/x10.webp" alt="" style="height: 160px;width: 160px;margin-top: 15px;margin-left: 43px;margin-bottom: 44px;">
  9.                         <h4 style="font-weight: 300;font-size: 14px;position: relative;top: -20px;left: 75px;margin-bottom: 5px;">Xiaomi Civi 3</h4>
  10.                         <h5 style="font-size:12px;color: #B0B0B0;position: relative;top: -20px;left: 65px;margin-bottom: 10px;">仿生双眸 天生出色</h5>
  11.                         <div style="font-size: 14px;color: #FF6700;position: relative;top: -20px;left: 85px;">2499元起</div>
  12.                     </li>
  13.                     <li>
  14.                         <img src="img/x11.webp" alt="" style="height: 160px;width: 160px;margin-top: 15px;margin-left: 43px;margin-bottom: 44px;">
  15.                         <h4 style="font-weight: 300;font-size: 14px;position: relative;top: -20px;left: 75px;margin-bottom: 5px;">Xiaomi 13 Ultra</h4>
  16.                         <h5 style="font-size:12px;color: #B0B0B0;position: relative;top: -20px;left: 17px;margin-bottom: 10px;">徕卡光学全焦段四摄一英寸可变光圈]..-</h5>
  17.                         <div style="font-size: 14px;color: #FF6700;position: relative;top: -20px;left: 85px;">5999元起</div>
  18.                     </li>
  19.                     <li>
  20.                         <img src="img/x12.webp" alt="" style="height: 160px;width: 160px;margin-top: 15px;margin-left: 43px;margin-bottom: 44px;">
  21.                         <h4 style="font-weight: 300;font-size: 14px;position: relative;top: -20px;left: 47px;margin-bottom: 5px;">Redmi Note 12 Turbo</h4>
  22.                         <h5 style="font-size:12px;color: #B0B0B0;position: relative;top: -20px;left: 54px;margin-bottom: 10px;">狂忌引擎超强性能释放</h5>
  23.                         <div style="font-size: 14px;color: #FF6700;position: relative;top: -20px;left: 85px;">1999元起</div>
  24.                     </li>
  25.                     <li>
  26.                         <img src="img/x13.webp" alt="" style="height: 160px;width: 160px;margin-top: 15px;margin-left: 43px;margin-bottom: 44px;">
  27.                         <h4 style="font-weight: 300;font-size: 14px;position: relative;top: -20px;left: 82px;margin-bottom: 5px;">Redmi K60</h4>
  28.                         <h5 style="font-size:12px;color: #B0B0B0;position: relative;top: -20px;left: 84px;margin-bottom: 10px;">Redmi K60</h5>
  29.                         <div style="font-size: 14px;color: #FF6700;position: relative;top: -20px;left: 64px;">2599元起</div>
  30.                         <span style="position: relative;top: -39px;left: 133px;color: #B0B0B0;font-size: 14px;text-decoration:line-through;">2699元</span>
  31.                     </li>
  32.                     <li>
  33.                         <img src="img/x14.webp" alt="" style="height: 160px;width: 160px;margin-top: 15px;margin-left: 43px;margin-bottom: 44px;">
  34.                         <h4 style="font-weight: 300;font-size: 14px;position: relative;top: -20px;left: 69px;margin-bottom: 5px;">Redmi K60 Pro</h4>
  35.                         <h5 style="font-size:12px;color: #B0B0B0;position: relative;top: -20px;left: 40px;margin-bottom: 10px;">【第二代浆龙8】狂暴引擎</h5>
  36.                         <div style="font-size: 14px;color: #FF6700;position: relative;top: -20px;left: 64px;">3299元起</div>
  37.                         <span style="position: relative;top: -39px;left: 133px;color: #B0B0B0;font-size: 14px;text-decoration:line-through;">3599元</span>
  38.                     </li>
  39.                     <li>
  40.                         <img src="img/x15.webp" alt="" style="height: 160px;width: 160px;margin-top: 15px;margin-left: 43px;margin-bottom: 44px;">
  41.                         <h4 style="font-weight: 300;font-size: 14px;position: relative;top: -20px;left: 37px;margin-bottom: 5px;">Redmi Note 12 Pro极速版</h4>
  42.                         <h5 style="font-size:12px;color: #B0B0B0;position: relative;top: -20px;left: 15px;margin-bottom: 10px;">高通说龙778G,OLED柔性直屏+—亿...</h5>
  43.                         <div style="font-size: 14px;color: #FF6700;position: relative;top: -20px;left: 85px;">1699元起</div>
  44.                     </li>
  45.                     <li>
  46.                         <img src="img/x16.webp" alt="" style="height: 160px;width: 160px;margin-top: 15px;margin-left: 43px;margin-bottom: 44px;">
  47.                         <h4 style="font-weight: 300;font-size: 14px;position: relative;top: -20px;left: 54px;margin-bottom: 5px;">Xiaomi 13限星定制色</h4>
  48.                         <h5 style="font-size:12px;color: #B0B0B0;position: relative;top: -20px;left: 16px;margin-bottom: 10px;">全所第二代眺坨8│徕卡专业光学镜头...</h5>
  49.                         <div style="font-size: 14px;color: #FF6700;position: relative;top: -20px;left: 85px;">49999元起</div>
  50.                     </li>
  51.                     <li>
  52.                         <img src="img/x17.webp" alt="" style="height: 160px;width: 160px;margin-top: 15px;margin-left: 43px;margin-bottom: 44px;">
  53.                         <h4 style="font-weight: 300;font-size: 14px;position: relative;top: -20px;left: 75px;margin-bottom: 5px;">Xiaomi 13 Pro</h4>
  54.                         <h5 style="font-size:12px;color: #B0B0B0;position: relative;top: -20px;left: 11px;margin-bottom: 10px;">全所第二代晓龙8│徕卡专业光学镜头...</h5>
  55.                         <div style="font-size: 14px;color: #FF6700;position: relative;top: -20px;left: 85px;">4999元起</div>
  56.                     </li>
  57.                 </ul>
  58.             </div>
  59.  
  60.  
  61.  
  62.         </div>

尾部代码 

  1. <div class="box7">
  2.         <div class="box71">
  3.             <div class="box711">
  4.                 <a href="#">
  5.                     <img src="img/小米图标.png" alt="" style="height: 56px;width: 56px;margin-top: 30px;margin-left: 8px;">
  6.                 </a>
  7.             </div>
  8.             <div class="box712">
  9.                 <div class="box7121" style="height: 20px;width: 1226px;margin-top: 30px;">
  10.                     <ul>
  11.                         <li>
  12.                             <a href="#">小米商城</a>
  13.                         </li>
  14.                         <em>|</em>
  15.                         <li>
  16.                             <a href="#">MIUI</a>
  17.                         </li>
  18.                         <em>|</em>
  19.                         <li>
  20.                             <a href="#">米家</a>
  21.                         </li>
  22.                         <em>|</em>
  23.                         <li>
  24.                             <a href="#">米剧</a>
  25.                         </li>
  26.                         <em>|</em>
  27.                         <li>
  28.                             <a href="#">多看</a>
  29.                         </li>
  30.                         <em>|</em>
  31.                         <li>
  32.                             <a href="#">游戏</a>
  33.                         </li>
  34.                         <em>|</em>
  35.                         <li>
  36.                             <a href="#">音乐</a>
  37.                         </li>
  38.                         <em>|</em>
  39.                         <li>
  40.                             <a href="#">政企服务</a>
  41.                         </li>
  42.                         <em>|</em>
  43.                         <li>
  44.                             <a href="#">小米天猫店</a>
  45.                         </li>
  46.                         <em>|</em>
  47.                         <li>
  48.                             <a href="#">小米集团购私政策</a>
  49.                         </li>
  50.                         <em>|</em>
  51.                         <li>
  52.                             <a href="#">小米公司儿童信息保护规则</a>
  53.                         </li>
  54.                         <em>|</em>
  55.                         <li>
  56.                             <a href="#">小米商娀妈私政蔗</a>
  57.                         </li>
  58.                         <em>|</em>
  59.                         <li>
  60.                             <a href="#">小诫商城用户协议</a>
  61.                         </li>
  62.                         <em>|</em>
  63.                         <li>
  64.                             <a href="#">问题反馈</a>
  65.                         </li>
  66.                         <em>|</em>
  67.                         <li>
  68.                             <a href="#">Select Location</a>
  69.                         </li>
  70.                     </ul>
  71.                 </div>
  72.                 <div class="box7122" style="height: 20px;width: 1226px;margin-top: 5px;">
  73.                     <ul>
  74.                         <li>
  75.                             <a href="#">北京互联网法院法律服务工作站</a>
  76.                         </li>
  77.                         <em>|</em>
  78.                         <li>
  79.                             <a href="#">中国消费者协会</a>
  80.                         </li>
  81.                         <em>|</em>
  82.                         <li>
  83.                             <a href="#">北京市消费者协会</a>
  84.                         </li>
  85.                     </ul>
  86.                 </div>
  87.                 <div class="box7123" style="height: 20px;width: 1226px;margin-top: 5px;">
  88.                     <span style="float: left; color:#757575;font-size: 12px;margin-top: 4px;margin-left: 10px;">mi.com京ICP证110507号</span>
  89.                     <ul>
  90.                         <li>
  91.                             <a href="#">京ICP备10046444号</a>
  92.                         </li>
  93.                         <li>
  94.                             <a href="#">京公网安备11010802020134号</a>
  95.                         </li>
  96.                         <li>
  97.                             <a href="#">京网文[2023]0169-004号</a>
  98.                         </li>
  99.                     </ul>
  100.                 </div>
  101.                 <div class="box7124" style="height: 20px;width: 1226px;margin-top: 5px;">
  102.                     <ul>
  103.                         <li>
  104.                             <a href="#">(京)）网械平台备字(2018）</a>
  105.                         </li>
  106.                         <li>
  107.                             <a href="#">第00005号互联网药品信息服务资格证(京)-非经营性-2014-0090</a>
  108.                         </li>
  109.                         <li>
  110.                             <a href="#">营业执照</a>
  111.                         </li>
  112.                         <li>
  113.                             <a href="#">医疗器械质量公告</a>
  114.                         </li>
  115.                     </ul>
  116.                 </div>
  117.                 <div class="box7125" style="height: 20px;width: 1226px;margin-top: 5px;">
  118.                     <ul>
  119.                         <li>
  120.                             <a href="#">增值电信业务许可证</a>
  121.                         </li>
  122.                     </ul>
  123.                     <span style="float: left; color:#757575;font-size: 12px;margin-top: 4px;margin-left: 10px;">网络食品经营备案</span>
  124.                     <span style="float: left; color:#757575;font-size: 12px;margin-top: 4px;margin-left: 10px;">京食药网食备202010048</span>
  125.                     <ul>
  126.                         <li>
  127.                             <a href="#">食品经营许可证</a>
  128.                         </li>
  129.                     </ul>
  130.                 </div>
  131.                 <div class="box7126" style="height: 20px;width: 1226px;margin-top: 5px;">
  132.                     <span style="float: left; color:#757575;font-size: 12px;margin-top: 4px;margin-left: 10px;">违法和不良信息举报电话:171-5104-4404</span>
  133.                     <ul>
  134.                         <li>
  135.                             <a href="#">知识产权侵权投诉</a>
  136.                         </li>
  137.                     </ul>
  138.                     <span style="float: left; color:#757575;font-size: 12px;margin-top: 4px;margin-left: 10px;">本网站所列数据，除特殊说明，所有数据均出自我可实验室测试</span>
  139.                 </div>
  140.                 <div class="box7127" style="height: 30px;width: 1226px;margin-top: 5px;">
  141.                     <ul>
  142.                         <li>
  143.                             <a href="#"><img src="img/img1.png" alt=""></a>
  144.                         </li>
  145.                         <li>
  146.                             <a href="#"><img src="img/img2.png" alt=""></a>
  147.                         </li>
  148.                         <li>
  149.                             <a href="#"><img src="img/img3.png" alt=""></a>
  150.                         </li>
  151.                         <li>
  152.                             <a href="#"><img src="img/img4.png" alt=""></a>
  153.                         </li>
  154.                     </ul>
  155.                 </div>
  156.                 <div class="box7128" style="height: 50px;width: 1226px;margin-top: 5px;position: relative;">
  157.                     <p style="font-size: 18px;color: #BABABA;position: absolute;bottom: 10px;left: 450px;">让全球每个人都能享受科技带来的美好生活</p>
  158.  
  159.                 </div>
  160.             </div>
  161.  
  162.         </div>
  163.  
  164.     </div>

总结 

  1. 基本还原了原网页，并且只用到了CSS3和HTML5。
  2. 当自主完成，满满成就感！

源码+图片素材

链接：https://pan.baidu.com/s/1LC-qW2wTvBtYzRFVnEz1qQ?pwd=ojbk 
提取码：ojbk

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/353511
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号