简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿小米商城移动端
Blogger Information
Blog 14
fans 2
comment 1
visits 7888
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿小米商城移动端
梦想
Original
799 people have browsed it

仿小米商城移动端

实例演示

  1.     <header>
  2.         <!-- logo -->
  3.         <a href=""><img src="images/icon-header-logo3.ddf2a1c313.png" alt=""></a>
  4.         <!-- 搜索框 -->
  5.         <a href="" class="so">
  6.             <span class="iconfont icon-wode-wode"></span>
  7.            <span>搜索商品名称</span> 
  8.         </a>
  9.         <!-- 我的 -->
  10.         <a href="" class="iconfont icon-wode-wode"></a>
  11.         <!-- 导航下部 -->
  12.         <div class="bottom">
  13.             <a href="">推荐</a>
  14.             <a href="">智能</a>
  15.             <a href="">电视</a>
  16.             <a href="">家电</a>
  17.             <a href="">笔记本</a>
  18.         </div>
  19.     </header>
  21.     <!-- 主体 -->
  22.     <main>
  23.         <!-- 轮番图 -->
  24.         <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/89fbb601177fec95fd14af5a9cc257e0.jpg?thumb=1&w=720&h=360" class="banner"></a>
  25.         <!-- 顶部导航 -->
  26.         <div class="mainnavs">
  27.             <a href="">
  28.                 <img src="images/shop.webp" alt="">
  30.             </a>
  31.             <a href="">
  32.                 <img src="images/zhong.webp" alt="">
  34.             </a>
  35.             <a href="">
  36.                 <img src="images/shouji.webp" alt="">
  38.             </a>
  39.             <a href="">
  40.                 <img src="images/huanxin.webp" alt="">
  42.             </a>
  43.             <a href="">
  44.                 <img src="images/shangxin.webp" alt="">
  46.             </a>
  47.             <a href="">
  48.                 <img src="images/zhineng.webp" alt="">
  50.             </a>
  51.             <a href="">
  52.                 <img src="images/bijiben.png" alt="">
  54.             </a>
  55.             <a href="">
  56.                 <img src="images/dianshi.png" alt="">
  58.             </a>
  59.             <a href="">
  60.                 <img src="images/xiyiji.webp" alt="">
  62.             </a>
  63.              <a href="">
  64.                 <img src="images/mifenka.png" alt="">
  66.             </a>
  68.         </div>
  69.         <!-- 快速入口 -->
  70.         <div class="kuaisu">
  71.             <a href=""><img src="images/k50.webp" alt=""></a>
  72.             <a href=""><img src="images/xiaomiwatch.webp" alt=""></a>
  73.             <a href=""><img src="images/ea50.webp" alt=""></a>
  74.         </div>
  75.         <a href=""><img src="images/k40s.webp" alt=""></a>
  76.         <!-- 手机列表 -->
  77.         <div class="shouji">
  78.             <a href="">
  79.                 <img src="images/k50dj.jpg" alt="">
  80.                 <span>K50 电竞版</span>
  81.                 <span>全线拉满的冷血旗舰</span>
  82.                 <span style="color: #ee7f79;">￥3299起</span>
  83.                 <button class="buy">立即购买</button>
  84.             </a>
  85.             <a href="">
  86.                 <img src="images/k50dj.jpg" alt="">
  87.                 <span>K50 电竞版</span>
  88.                 <span>全线拉满的冷血旗舰</span>
  89.                 <span style="color: #ee7f79;">￥3299起</span>
  90.                 <button class="buy">立即购买</button>
  91.             </a>
  92.             <a href="">
  93.                 <img src="images/k50dj.jpg" alt="">
  94.                 <span>K50 电竞版</span>
  95.                 <span>全线拉满的冷血旗舰</span>
  96.                 <span style="color: #ee7f79;">￥3299起</span>
  97.                 <button class="buy">立即购买</button>
  98.             </a>
  99.             <a href="">
  100.                 <img src="images/k50dj.jpg" alt="">
  101.                 <span>K50 电竞版</span>
  102.                 <span>全线拉满的冷血旗舰</span>
  103.                 <span style="color: #ee7f79;">￥3299起</span>
  104.                 <button class="buy">立即购买</button>
  105.             </a>
  106.             <a href="">
  107.                 <img src="images/k50dj.jpg" alt="">
  108.                 <span>K50 电竞版</span>
  109.                 <span>全线拉满的冷血旗舰</span>
  110.                 <span style="color: #ee7f79;">￥3299起</span>
  111.                 <button class="buy">立即购买</button>
  112.             </a>
  113.             <a href="">
  114.                 <img src="images/k50dj.jpg" alt="">
  115.                 <span>K50 电竞版</span>
  116.                 <span>全线拉满的冷血旗舰</span>
  117.                 <span style="color: #ee7f79;">￥3299起</span>
  118.                 <button class="buy">立即购买</button>
  119.             </a>
  120.             <a href="">
  121.                 <img src="images/k50dj.jpg" alt="">
  122.                 <span>K50 电竞版</span>
  123.                 <span>全线拉满的冷血旗舰</span>
  124.                 <span style="color: #ee7f79;">￥3299起</span>
  125.                 <button class="buy">立即购买</button>
  126.             </a>
  127.             <a href="">
  128.                 <img src="images/k50dj.jpg" alt="">
  129.                 <span>K50 电竞版</span>
  130.                 <span>全线拉满的冷血旗舰</span>
  131.                 <span style="color: #ee7f79;">￥3299起</span>
  132.                 <button class="buy">立即购买</button>
  133.             </a>
  135.         </div>
  136.         <div class="gengduo">
  137.             <a href="" style="text-align: center;">更多小米手机产品&gt;</a>
  138.         </div>
  139.         <!-- 小米电视 -->
  140.         <div class="dianshi">
  141.             <a href="">
  142.                 <img src="images/dianshi1.webp" alt="">
  143.             </a>
  144.         </div>
  145.           <div class="gengduo">
  146.             <a href="" style="text-align: center;">更多小米电视产品&gt;</a>
  147.         </div>
  148.         <!-- 小米笔记本 -->
  149.         <div class="mpc">
  150.             <a href="">
  151.                 <img src="images/bijiben/banner.webp" alt="">
  152.             </a>
  153.             <div class="pc">
  154.                 <a href="">
  155.                 <img src="images/bijiben/redmibookpro14.jpg" alt="">
  156.                 <span>RedmiBook Pro 14</span>
  157.                 <span>2.5k超视网膜全面屏</span>
  158.                 <span style="color: #ee7f79;">￥4999起</span>
  159.                 <button class="buy">立即购买</button>
  160.             </a>
  161.             <a href="">
  162.                 <img src="images/bijiben/redmibookpro15.jpg" alt="">
  163.                 <span>RedmiBook Pro 15</span>
  164.                 <span>3.2k超视网膜全面屏</span>
  165.                 <span style="color: #ee7f79;">￥5299起</span>
  166.                 <button class="buy">立即购买</button>
  167.             </a>
  168.             <a href="">
  169.                 <img src="images/bijiben/xiaomi15pro.jpg" alt="">
  170.                 <span>小米笔记本Pro 15</span>
  171.                 <span>2.5k超视网膜全面屏</span>
  172.                 <span style="color: #ee7f79;">￥4999起</span>
  173.                 <button class="buy">立即购买</button>
  174.             </a>
  175.             <a href="">
  176.                 <img src="images/bijiben/xiaomi14pro.jpg" alt="">
  177.                 <span>小米笔记本Pro 14</span>
  178.                 <span>2.5k超视网膜全面屏</span>
  179.                 <span style="color: #ee7f79;">￥4999起</span>
  180.                 <button class="buy">立即购买</button>
  181.             </a>
  182.             </div>
  184.         </div>
  185.           <div class="gengduo">
  186.             <a href="" style="text-align: center;">更多小米笔记本产品&gt;</a>
  187.         </div>
  188.         <a href="">
  189.             <img src="images/zhineng1.webp" alt="">
  190.         </a>
  191.           <div class="gengduo">
  192.             <a href="" style="text-align: center;">更多米家家电产品&gt;</a>
  193.         </div>
  194.           <div class="gengduo">
  195.             <a href="" style="text-align: center;">更多米家只能产品&gt;</a>
  196.         </div>
  197.         <!-- 底部快速入口 -->
  198.         <div class="bottom">
  199.             <a href="">
  200.                 <img src="images/bottom/xuexi.webp" alt="">
  201.             </a>
  202.             <a href="">
  203.                 <img src="images/bottom/jiating.webp" alt="">
  204.             </a>
  205.             <a href="">
  206.                 <img src="images/bottom/lvxing.webp" alt="">
  207.             </a>
  208.             <a href="">
  209.                 <img src="images/bottom/yinyue.webp" alt="">
  210.             </a>
  211.             <a href="">
  212.                 <img src="images/bottom/xinjia.webp" alt="">
  213.             </a>
  214.             <a href="">
  215.                 <img src="images/bottom/sheji.webp" alt="">
  216.             </a>
  217.         </div>
  218.         <div>
  219.             <a href="">
  220.                 <img src="images/bottom/huanxin.webp" alt="">
  221.             </a>
  222.         </div>
  223.         <div class="xm">
  224.             <a href="">了解小米</a>
  225.         </div>
  226.         <div class="app">
  227.             <a href="" style="color: white;">
  228.                 <span>来APP领新人礼包</span></a>
  229.         </div>
  230.     </main>
  232.     <!-- 页脚-->
  233.     <footer>
  234.         <a href="">
  235.             <span class="iconfont icon-shouye-shouye"></span>
  236.             <span>首页</span>          
  237.         </a>
  238.           <a href="">
  239.             <span class="iconfont icon-fenlei"></span>
  240.             <span>分类</span>
  242.         </a>
  243.           <a href="">
  244.              <span class="iconfont icon-quanzi"></span>
  245.             <span>米圈</span>
  247.         </a>
  248.           <a href="">
  249.             <span class="iconfont icon-gouwuche"></span>
  250.             <span>购物车</span>
  252.         </a>
  253.           <a href="">
  254.             <span class="iconfont icon-wode-wode"></span>
  255.             <span>我的</span>
  257.         </a>
  258.     </footer>

imdex.css

  1. @import url(reset.css);
  2. @import url(main.css);
  3. @import url(header.css);
  4. @import url(public.css);
  5. @import url(../font_icon/iconfont.css);

reser.css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. a{
  7.     text-decoration: none;
  8.     color: #747474;
  9. }
  10. li{
  11.     list-style: none;
  12. }
  15. html{
  16.     font-size: calc(100vw / 3.75);
  17. }
  18. body{
  19.     font-size: 0.13rem;
  20.     color: #333;
  21.     background-color: #f5f5f5;
  22.     margin: auto;
  23.     /* padding: 0 0.1rem; */
  24.     overflow-y: auto;
  25. }
  26. body img{
  27.     width: 100%;
  29. }
  31. @media (max-width:320px) {
  32.     body{
  33.         font-size: 12px;
  34.     }
  35. }
  37. @media (min-width:640px) {
  38.     body{
  39.         font-size: 16px;
  41.     }
  42. }

header.css

  1. header {
  2.   display: grid;
  3.   grid-template-columns: 0.3rem 1fr 0.5rem;
  4.   place-items: center;
  5.   padding: 0 0.1rem;
  6. }
  7. header .so {
  8.   border: 1px solid rgb(121, 121, 121);
  9.   height: 0.3rem;
  10.   width: 80%;
  11.   display: flex;
  12.   border-radius: 0.03rem;
  13.   place-items: center;
  14.   background-color: white;
  15.   padding-left: 0.15rem;
  16.   color: #b2b2b2;
  17. }
  18. header .so .iconfont,
  19. header .iconfont {
  20.   font-size: 0.15rem;
  21.   padding-right: 0.1rem;
  22. }
  23. header .bottom {
  24.   display: grid;
  25.   grid-template-columns: repeat(5, 0.4rem);
  26.   position: relative;
  27.   left: 1.4rem;
  28. }

mian.css

  1.     main{
  2.         min-height: 3000px;
  3.         padding-bottom: 0.5rem;
  4.         margin-top: 0.5rem;
  5.     }
  6.     /* 轮番图 */
  7. main .banner{
  8.     margin:  0.1rem 0;
  9.     padding: 0.1rem 0;
  10.     width: 100%;
  11.     height: 2.875rem;
  12. }
  13. main .mainnavs{
  14.     display: grid;
  15.     grid-template-columns: repeat(5,1fr);
  16.     position: relative;
  17.     top: -0.5rem;
  18.     gap: 0;
  20. }
  21. /* 快速入口 */
  22. main .kuaisu{
  23.     display: grid;
  24.     grid-template-columns: 1fr 1fr;
  25.     gap: .05rem;
  26. }
  27. main .kuaisu > a:first-of-type{
  28.     grid-row: span 2 ;
  29. }
  30. /* 手机、笔记本商品列表 */
  31. main .shouji,
  32. main .mpc .pc{
  33.     display: grid;
  34.     grid-template-columns: 1fr 1fr;
  35.     place-items: center;
  36.     /* border-bottom: 1px solid #cecece; */
  37.     padding-bottom: 0.1rem;
  38.     border-bottom: 1px solid #cecece;
  39.     background-color: white;
  40.     gap: .08rem;
  41. }
  42. main .shouji > a,
  43. main .mpc .pc > a{
  44.     display: grid;
  45.     place-items: center;
  46.     padding-bottom: .1rem;   
  47. }
  48. main .shouji  button,
  49. main .mpc .pc  button{
  50.     border: none;
  51.     outline: none;
  52.     background-color: #ea625b;
  53.     color: white;
  54.     border-radius: 0.05rem;
  55.     height: 0.3rem;
  56.     width: 0.9rem;
  57. }
  58. /* 更多商品 */
  59. main .gengduo,
  60. main .xm{
  61.     height: 50px;
  62.     background-color: white;
  63.     display: flex;
  64.     place-content: center;
  65.     place-items: center;
  66.     font-size: larger;
  67.     margin-bottom: 10px;
  68. }
  69. main .bottom{
  70.     display: grid;
  71.     grid-template-columns: 1fr 1fr;
  72.     margin-bottom: .1rem;
  73. }
  74. main .app{
  75.     background-color: #ff6700;
  76.     color: white;
  77.     font-size: larger;
  78.     width: 180px;
  79.     height: 50px;
  80.     border-radius: 25px;
  81.     display: flex;
  82.     place-content: center;
  83.     place-items: center;
  84.     position: fixed;
  85.     left: 120px;
  86.     bottom: 60px;
  87. }

public.css

  1. header{
  2.     width: 100vw;
  3.     height: 0.7rem;
  4.     background-color: #f2f2f2;
  5. }
  7. header{
  8.     position: fixed;
  9.     top: 0;
  10.     left: 0;
  11.     right: 0;
  12.     z-index: 9;
  13. }
  14. /* 页尾 */
  15. footer{
  16.     width: 100vw;
  17.     height: 0.4rem;
  18.     background-color: #f2f2f2;
  19.     position: fixed;
  20.     bottom: 0;
  21.     left: 0;
  22.     right: 0;
  23.     z-index: 9;
  24. }
  25. footer {
  26.     display: grid;
  27.     grid-template-columns: repeat(5,1fr);
  28.     place-content: space-around;
  29.     place-items: center;
  30. }
  31. footer > a{
  32.     display: grid;
  33.     place-items: center;
  34. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：来张效果图就完美了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！