简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿小米商城移动端

仿小米商城移动端

梦想
梦想原创
2022年07月21日 17:00:17807浏览

仿小米商城移动端

实例演示

  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. }
上一条：JavaScript中的变量、常量、作用域以及标识符下一条：常用数据类型与流程控制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多