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

华为商城（HTML5+CSS3）_用html制作华为商城首页怎么做

作者：菜鸟追梦旅行 | 2024-03-15 19:05:53

赞

踩

用html制作华为商城首页怎么做

一、前言

      对于华为商城是自学时做的一个作品，想要学习的小伙伴，可以借鉴的，一下我会展示效果图和部分代码。

（注：此次做了华为的一系列网页，可以前往我的主页进行查看）

二、效果成品图

三、代码展示（为HTML部分代码，不能直接运行，源码在下方） 

1、头部导航栏 

  1. <div class="head1">
  2.         <div class="head1_1" style="margin: 0 auto;">
  3.             <ul class="head1_ul1">
  4.                 <li><a href="">首页</a></li>
  5.                 <span>|</span>
  6.                 <li><a href="">华为官网</a></li>
  7.                 <span>|</span>
  8.                 <li><a href="">V码(优购码)</a></li>
  9.                 <span>|</span>
  10.                 <li><a href="">企业购</a></li>
  11.                 <span>|</span>
  12.                 <li><a href="">Select Region</a></li>
  13.                 <span>|</span>
  14.                 <li><a href="">更多精彩</a></li>
  15.             </ul>
  16.  
  17.             <ul class="head1_ul1" style="float:right">
  18.                 <li><a href="" style="float:right">购物车(1)</a></li>
  19.                 <span style="float:right">|</span>
  20.                 <li><a href="" style="float:right">手机版</a></li>
  21.                 <span style="float:right">|</span>
  22.                 <li><a href="" style="float:right">网站导航</a></li>
  23.                 <span style="float:right">|</span>
  24.                 <li><a href="" style="float:right">客户服务</a></li>
  25.                 <span style="float:right">|</span>
  26.                 <li><a href="" style="float:right">我的订单</a></li>
  27.                 <span style="float:right">|</span>
  28.                 <li><a href="" style="float:right">逢考必过哟</a></li>
  29.             </ul>
  30.         </div>
  31.     </div>

2、轮播图

  1. <div class="head3_lunbo">
  2.                     <!-- 引入轮播图图片 -->
  3.                     <a href="#" target="_blank"><img src="../imgs/lun1.webp" /></a>
  4.                     <a href="#" target="_blank"><img src="../imgs/lun2.webp" /></a>
  5.                     <a href="#" target="_blank"><img src="../imgs/lun3.webp" /></a>
  6.                     <a href="#" target="_blank"><img src="../imgs/lun4.webp" /></a>
  7.                 </div>
  8.  
  9.  
  1. .head3 {
  2.     width: 1518px;
  3.     height: 550px;
  4.     overflow: hidden;
  5.     float: left;
  6. }
  7.  
  8. .head3_lunbo {
  9.     width: 6072px;
  10.     height: 550px;
  11.     animation: text 10s infinite backwards;
  12.     /*消除图片间隔*/
  13.  
  14. }
  15.  
  16. .head3_lunbo img {
  17.     width: 1518px;
  18.     height: 550px;
  19.     float: left;
  20. }
  21.  
  22. @keyframes text {
  23.  
  24.     /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
  25.     0%,
  26.     20% {
  27.         margin-left: 0px;
  28.     }
  29.  
  30.     25%,
  31.     45% {
  32.         margin-left: -1518px;
  33.     }
  34.  
  35.     50%,
  36.     70% {
  37.         margin-left: -3036px;
  38.     }
  39.  
  40.     75%,
  41.     100% {
  42.         margin-left: -4554px;
  43.     }

3、商品框

  1. <div class="head3_div1_3">
  2.                         <span class="head3_div3_s">
  3.                             <span class="head3_div1_s1">笔记本 平板</span>
  4.                         <span class="head3_div1_s2"></span>
  5.                         </span>
  6.                         <div class="head3_div3_1_2">
  7.                             <span class="head3_div1_1_2s">
  8.                                 <img src="../imgs/a1.webp">
  9.                                 <span>Xiaomi 12S</span>
  10.                             </span>
  11.                             <span class="head3_div1_1_2s">
  12.                                 <img src="../imgs/a1.webp">
  13.                                 <span>Redmi 10A</span>
  14.                             </span>
  15.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  16.                                 <span>Xiaomi 12S</span>
  17.                             </span>
  18.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  19.                                 <span>Xiaomi 12S</span>
  20.                             </span>
  21.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  22.                                 <span>iphone 13</span>
  23.                             </span>
  24.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  25.                                 <span>Xiaomi 12S</span>
  26.                             </span>
  27.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  28.                                 <span>Xiaomi 12S</span>
  29.                             </span>
  30.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  31.                                 <span>Xiaomi 12S</span>
  32.                             </span>
  33.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  34.                                 <span>Redmi K50</span>
  35.                             </span>
  36.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  37.                                 <span>Xiaomi 12S</span>
  38.                             </span>
  39.                             <span class="head3_div1_1_2s"><img src="../imgs/a1.webp">
  40.                                 <span>Xiaomi 12S</span>
  41.                             </span>
  42.  
  43.                         </div>

4、尾部

  1. </div>
  2.  
  3.         <div class="laster" style="background-color: #ffffff;width:100% ;">
  4.             <div class="laster1" style="margin: 0 auto;">
  5.                 <div class="last all">
  6.                     <div class="box1">
  7.                         <ul>
  8.                             <li><a href="#">百强企业 质量保证</a></li>
  9.                             <li><a href="#">7天退货 15天换货</a></li>
  10.                             <li><a href="#">48元起免运费</a></li>
  11.                             <li><a href="#">2000家服务店 全国联保</a></li>
  12.                         </ul>
  13.                     </div>
  14.                     <div class="box2">
  15.                         <div class="x1">
  16.                             <div class="y1">
  17.                                 <h4>购物指南</h4>
  18.                                 <ul>
  19.                                     <li>
  20.                                         <a href="#">免费分期</a>
  21.                                     </li>
  22.                                     <li>
  23.                                         <a href="#">以旧换新</a>
  24.                                     </li>
  25.                                     <li>
  26.                                         <a href="#">纵测活动</a>
  27.                                     </li>
  28.                                     <li>
  29.                                         <a href="#">企业购</a>
  30.                                     </li>
  31.                                     <li>
  32.                                         <a href="#">O2O采购</a>
  33.                                     </li>
  34.                                 </ul>
  35.                             </div>
  36.                             <div class="y2">
  37.                                 <h4>售后服务</h4>
  38.                                 <ul>
  39.                                     <li>
  40.                                         <a href="#">门店维修</a>
  41.                                     </li>
  42.                                     <li>
  43.                                         <a href="#">保修政策</a>
  44.                                     </li>
  45.                                     <li>
  46.                                         <a href="#">防伪查询</a>
  47.                                     </li>
  48.                                     <li>
  49.                                         <a href="#">退换货政策</a>
  50.                                     </li>
  51.                                     <li>
  52.                                         <a href="#">手机寄修服务</a>
  53.                                     </li>
  54.                                     <li>
  55.                                         <a href="#">维修备件价格查询</a>
  56.                                     </li>
  57.                                 </ul>
  58.                             </div>
  59.                             <div class="y3">
  60.                                 <h4>维修与技术支持</h4>
  61.                                 <ul>
  62.                                     <li>
  63.                                         <a href="#">服务店</a>
  64.                                     </li>
  65.                                     <li>
  66.                                         <a href="#">预约维修</a>
  67.                                     </li>
  68.                                     <li>
  69.                                         <a href="#">手机寄修</a>
  70.                                     </li>
  71.                                     <li>
  72.                                         <a href="#">备件价格查询</a>
  73.                                     </li>
  74.                                     <li>
  75.                                         <a href="#">上门服务</a>
  76.                                     </li>
  77.                                 </ul>
  78.                             </div>
  79.                             <div class="y4">
  80.                                 <h4>特色服务</h4>
  81.                                 <ul>
  82.                                     <li>
  83.                                         <a href="#">防伪查询</a>
  84.                                     </li>
  85.                                     <li>
  86.                                         <a href="#">补购保障</a>
  87.                                     </li>
  88.                                     <li>
  89.                                         <a href="#">以旧换新</a>
  90.                                     </li>
  91.                                     <li>
  92.                                         <a href="#">礼品包装</a>
  93.                                     </li>
  94.                                 </ul>
  95.                             </div>
  96.                             <div class="y5">
  97.                                 <h4>关于我们</h4>
  98.                                 <ul>
  99.                                     <li>
  100.                                         <a href="#">公司介绍</a>
  101.                                     </li>
  102.                                     <li>
  103.                                         <a href="#">华为零售店</a>
  104.                                     </li>
  105.                                     <li>
  106.                                         <a href="#">商家中心</a>
  107.                                     </li>
  108.                                     <li>
  109.                                         <a href="#">意见反馈</a>
  110.                                     </li>
  111.                                 </ul>
  112.                             </div>
  113.                             <div class="y6">
  114.                                 <h4>友情链接</h4>
  115.                                 <ul>
  116.                                     <li>
  117.                                         <a href="#">华为集团</a>
  118.                                     </li>
  119.                                     <li>
  120.                                         <a href="#">华为消费者业务</a>
  121.                                     </li>
  122.                                     <li>
  123.                                         <a href="#">华为云</a>
  124.                                     </li>
  125.                                     <li>
  126.                                         <a href="#">华为应用市场</a>
  127.                                     </li>
  128.                                     <li>
  129.                                         <a href="#">华为心声社区</a>
  130.                                     </li>
  131.                                 </ul>
  132.                             </div>
  133.                         </div>
  134.                         <div class="x2">
  135.                             <div class="x3">
  136.                                 <div class="y7">950805</div>
  137.                                 <div class="y8">7×24小时客服热线（仅收市话费）</div>
  138.                                 <div class="y9">在线客服</div>
  139.                                 <div class="y10">
  140.                                     关注VMALL: <span></span>
  141.                                 </div>
  142.                             </div>
  143.                         </div>
  144.  
  145.  
  146.                     </div>
  147.                     <div class="box4">
  148.                         <div class="y11">
  149.                             <a href="#"><img src="../imgs/华为商城图标.png" alt="" style="height: 20px;width: 80px; margin-top: 30px;"></a>
  150.                         </div>
  151.                         <div class="y12">
  152.                             <div class="z1">
  153.                                 <ul>
  154.                                     <li>
  155.                                         <a href="#">华为集团</a>
  156.                                     </li>
  157.                                     <li style="border-left:1px solid #EBEBEB;">
  158.                                         <a href="#">华为CBG官网</a>
  159.                                     </li>
  160.                                     <li style="border-left:1px solid #EBEBEB;">
  161.                                         <a href="#">华为应用市场</a>
  162.                                     </li>
  163.                                     <li style="border-left:1px solid #EBEBEB;">
  164.                                         <a href="#">HarmonyOS</a>
  165.                                     </li>
  166.                                     <li style="border-left:1px solid #EBEBEB;">
  167.                                         <a href="#">华为终端云空间</a>
  168.                                     </li>
  169.                                     <li style="border-left:1px solid #EBEBEB;">
  170.                                         <a href="#">开发者联盟</a>
  171.                                     </li>
  172.                                     <li style="border-left:1px solid #EBEBEB;">
  173.                                         <a href="#">华为商城手机版</a>
  174.                                     </li>
  175.                                 </ul>
  176.                             </div>
  177.                             <div class="z2">
  178.                                 <ul>
  179.                                     <li><a href="#">隐私声明</a></li>
  180.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">服务协议</a></li>
  181.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">COOKIES</a></li>
  182.                                     <li style="font-size: 12px; color: #999999;">Copyright@2021-2023华为终端有限公司 版权所有</li>
  183.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">经营资质</a></li>
  184.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">粤ICP备19015064号</a></li>
  185.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">粤公网安备44190002003939号</a></li>
  186.                                 </ul>
  187.                             </div>
  188.                             <div class="z3">
  189.                                 <ul>
  190.                                     <li><a href="#">增值电信业务经营许可证：粤B2—20190762</a></li>
  191.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">备案主体编号：44201919072182</a>
  192.                                     </li>
  193.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">粤新出网备（2021）2号</a></li>
  194.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">（粤）网械平台备字[2022]第00005号</a>
  195.                                     </li>
  196.                                 </ul>
  197.                             </div>
  198.                             <div class="z4">
  199.                                 <ul>
  200.                                     <li><a href="#">互联网药品信息服务资格证（粤）-非经营性-2020-0102</a></li>
  201.                                     <li style="border-left:1px solid #EBEBEB;"><a href="#">广东省网络食品交易第三方平台备案：GDWS10168</a></li>
  202.                                 </ul>
  203.                             </div>
  204.  
  205.                         </div>
  206.                         <div class="y13">
  207.                             <a href="#"><img src="../imgs/电子商标.png" alt="" style="height: 30px;width: 90px; margin-top: 30px;margin-left: 20px ;"></a>
  208.                         </div>
  209.                     </div>
  210.  
  211.  
  212.                 </div>
  213.  
  214.             </div>
  215.         </div>
  216.  
  217.     </div>

四、总结

这个华为商城和小米商城比较相似，完成小米商城后，像这样的作品完成起来就没了难度，正在学习的小伙伴们在此送你们一句话：“要摘取果子的人必须爬上树”。 

五、源码+图片素材

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

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

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

  

闽ICP备14008679号