简体中文（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

博客列表 >仿京东移动端首页参考

仿京东移动端首页参考

JOAblog
JOAblog原创
2021年07月11日 17:44:10576浏览

仿京东移动端首页

效果图示：

html代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="/img/font_icon/iconfont.css" />
  8.     <link rel="stylesheet" href="/css/index.css" />
  10.     <title>多快好省就上京东购物</title>
  11.   </head>
  12.   <body>
  13.     <!-- 页眉 -->
  14.     <div class="head">
  15.       <!-- 顶部左侧图标按钮 -->
  16.       <div class="caidan iconfont icon-gengduo"></div>
  17.       <!-- 中部搜索 -->
  18.       <div class="sousuo">
  19.         <!-- 文字LOGOJD -->
  20.         <p>JD</p>
  21.         <!-- 搜索图标 -->
  22.         <div class="sousuotubiao iconfont icon-sousuo"></div>
  23.         <!-- 搜索输入框 -->
  24.         <input
  25.           type="text"
  26.           name="sousuo"
  27.           id="sousuo"
  28.           placeholder="输入想要购买的商品"
  29.         />
  30.       </div>
  31.       <!-- 顶部右侧登录 -->
  32.       <div class="login"><span>登录</span></div>
  33.     </div>
  35.     <!-- 主体 -->
  36.     <div class="main">
  37.       <!-- banner -->
  38.       <div class="banner"><img src="/img/banner.png" alt="" /></div>
  39.       <!-- 主体菜单 -->
  40.       <div class="maincd">
  41.         <a href=""
  42.           ><img src="/img/jdicon/1.png" alt="" /><span>京东超市</span></a
  43.         >
  44.         <a href=""
  45.           ><img src="/img/jdicon/2.png" alt="" /><span>数码电器</span></a
  46.         >
  47.         <a href=""
  48.           ><img src="/img/jdicon/3.png" alt="" /><span>京东服饰</span></a
  49.         ><a href=""
  50.           ><img src="/img/jdicon/4.png" alt="" /><span>京东生鲜</span></a
  51.         >
  52.         <a href=""
  53.           ><img src="/img/jdicon/5.png" alt="" /><span>京东到家</span></a
  54.         >
  55.         <a href=""
  56.           ><img src="/img/jdicon/1.png" alt="" /><span>充值缴费</span></a
  57.         ><a href=""
  58.           ><img src="/img/jdicon/2.png" alt="" /><span>9.9元拼</span></a
  59.         >
  60.         <a href=""><img src="/img/jdicon/4.png" alt="" /><span>领券</span></a>
  61.         <a href=""><img src="/img/jdicon/3.png" alt="" /><span>领津贴</span></a
  62.         ><a href=""
  63.           ><img src="/img/jdicon/2.png" alt="" /><span>PLUS会员</span></a
  64.         >
  65.       </div>
  66.       <!-- 秒杀 -->
  67.       <div class="miaosha">
  68.         <div class="miaoshatop">
  69.           <a href="">
  70.             <div><p>京东秒杀</p></div>
  71.             <div>14点场</div>
  72.             <div>
  73.               <div>00</div>
  74.               <span>:</span>
  75.               <div>13</div>
  76.               <span>:</span>
  77.               <div>22</div>
  78.             </div>
  79.           </a>
  80.           <a href="">更多秒杀</a>
  81.         </div>
  82.         <div class="miaoshamain">
  83.           <ur class="miaoshaul">
  84.             <li class="miaoshali">
  85.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  86.               <div>
  87.                 <span><em>￥</em> 11</span
  88.                 ><span
  89.                   ><em>￥</em> 22
  90.                   <hr
  91.                 /></span>
  92.               </div>
  93.             </li>
  94.             <li class="miaoshali">
  95.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  96.               <div>
  97.                 <span><em>￥</em> 33</span
  98.                 ><span
  99.                   ><em>￥</em> 44
  100.                   <hr
  101.                 /></span>
  102.               </div>
  103.             </li>
  104.             <li class="miaoshali">
  105.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  106.               <div>
  107.                 <span><em>￥</em> 55</span
  108.                 ><span
  109.                   ><em>￥</em> 66
  110.                   <hr
  111.                 /></span>
  112.               </div>
  113.             </li>
  114.             <li class="miaoshali">
  115.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  116.               <div>
  117.                 <span><em>￥</em> 77</span
  118.                 ><span
  119.                   ><em>￥</em> 88
  120.                   <hr
  121.                 /></span>
  122.               </div>
  123.             </li>
  124.             <li class="miaoshali">
  125.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  126.               <div>
  127.                 <span> <em>￥</em> 99</span
  128.                 ><span
  129.                   ><em>￥</em> 110
  130.                   <hr
  131.                 /></span>
  132.               </div>
  133.             </li>
  134.             <li class="miaoshali">
  135.               <div><img src="/img/jdicon/1.jpg" alt="" /></div>
  136.               <div>
  137.                 <span><em>￥</em> 120</span
  138.                 ><span
  139.                   ><em>￥</em> 130
  140.                   <hr
  141.                 /></span>
  142.               </div>
  143.             </li>
  144.           </ur>
  145.         </div>
  146.       </div>
  148.       <!-- 商品区 -->
  149.       <div class="sp">
  150.         <ul class="spul">
  151.           <li class="spli">
  152.             <div class="spimg">
  153.               <img src="/img/jdicon/2.jpg" alt="" />
  154.             </div>
  155.             <div class="sptext">
  156.               BOTTLED
  157.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  158.             </div>
  159.             <div class="splook">
  160.               <a href="" class="spjg">￥159</a>
  161.               <a href="" class="spxs">看相似</a>
  162.             </div>
  163.           </li>
  164.           <li class="spli">
  165.             <div class="spimg">
  166.               <img src="/img/jdicon/2.jpg" alt="" />
  167.             </div>
  168.             <div class="sptext">
  169.               BOTTLED
  170.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  171.             </div>
  172.             <div class="splook">
  173.               <a href="" class="spjg">￥159</a>
  174.               <a href="" class="spxs">看相似</a>
  175.             </div>
  176.           </li>
  177.           <li class="spli">
  178.             <div class="spimg">
  179.               <img src="/img/jdicon/2.jpg" alt="" />
  180.             </div>
  181.             <div class="sptext">
  182.               BOTTLED
  183.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  184.             </div>
  185.             <div class="splook">
  186.               <a href="" class="spjg">￥159</a>
  187.               <a href="" class="spxs">看相似</a>
  188.             </div>
  189.           </li>
  190.           <li class="spli">
  191.             <div class="spimg">
  192.               <img src="/img/jdicon/2.jpg" alt="" />
  193.             </div>
  194.             <div class="sptext">
  195.               BOTTLED
  196.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  197.             </div>
  198.             <div class="splook">
  199.               <a href="" class="spjg">￥159</a>
  200.               <a href="" class="spxs">看相似</a>
  201.             </div>
  202.           </li>
  203.           <li class="spli">
  204.             <div class="spimg">
  205.               <img src="/img/jdicon/2.jpg" alt="" />
  206.             </div>
  207.             <div class="sptext">
  208.               BOTTLED
  209.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  210.             </div>
  211.             <div class="splook">
  212.               <a href="" class="spjg">￥159</a>
  213.               <a href="" class="spxs">看相似</a>
  214.             </div>
  215.           </li>
  216.           <li class="spli">
  217.             <div class="spimg">
  218.               <img src="/img/jdicon/2.jpg" alt="" />
  219.             </div>
  220.             <div class="sptext">
  221.               BOTTLED
  222.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  223.             </div>
  224.             <div class="splook">
  225.               <a href="" class="spjg">￥159</a>
  226.               <a href="" class="spxs">看相似</a>
  227.             </div>
  228.           </li>
  229.           <li class="spli">
  230.             <div class="spimg">
  231.               <img src="/img/jdicon/2.jpg" alt="" />
  232.             </div>
  233.             <div class="sptext">
  234.               BOTTLED
  235.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  236.             </div>
  237.             <div class="splook">
  238.               <a href="" class="spjg">￥159</a>
  239.               <a href="" class="spxs">看相似</a>
  240.             </div>
  241.           </li>
  242.           <li class="spli">
  243.             <div class="spimg">
  244.               <img src="/img/jdicon/2.jpg" alt="" />
  245.             </div>
  246.             <div class="sptext">
  247.               BOTTLED
  248.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  249.             </div>
  250.             <div class="splook">
  251.               <a href="" class="spjg">￥159</a>
  252.               <a href="" class="spxs">看相似</a>
  253.             </div>
  254.           </li>
  255.           <li class="spli">
  256.             <div class="spimg">
  257.               <img src="/img/jdicon/2.jpg" alt="" />
  258.             </div>
  259.             <div class="sptext">
  260.               BOTTLED
  261.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  262.             </div>
  263.             <div class="splook">
  264.               <a href="" class="spjg">￥159</a>
  265.               <a href="" class="spxs">看相似</a>
  266.             </div>
  267.           </li>
  268.           <li class="spli">
  269.             <div class="spimg">
  270.               <img src="/img/jdicon/2.jpg" alt="" />
  271.             </div>
  272.             <div class="sptext">
  273.               BOTTLED
  274.               JOY运动水壶健身水杯大容量承认便携户外便携户外便携户外便携户外便携户外...
  275.             </div>
  276.             <div class="splook">
  277.               <a href="" class="spjg">￥159</a>
  278.               <a href="" class="spxs">看相似</a>
  279.             </div>
  280.           </li>
  281.         </ul>
  282.       </div>
  283.     </div>
  285.     <!-- 页脚 -->
  286.     <div class="footer">
  287.       <ur>
  288.         <li class="iconfont icon-jingdong">
  289.           <span>首页</span>
  290.         </li>
  291.         <li class="iconfont icon-sort"><span>分类</span></li>
  292.         <li class="iconfont icon-niu"><span>京喜</span></li>
  293.         <li class="iconfont icon-gwc"><span>购物车</span></li>
  294.         <li class="iconfont icon-denglu"><span>未登录</span></li>
  295.       </ur>
  296.     </div>
  297.   </body>
  298. </html>

index.css代码：

  1. @import url(/css/head.css);
  2. @import url(/css/footer.css);
  3. @import url(/css/main.css);
  4. *{
  5.     padding: 0;margin: 0;box-sizing: border-box;
  6. }
  7. :root{
  8.     font-size: 10px;
  9. }
  10. body{
  11.     font-size: 1.6rem;
  12. }

head.css代码：

  1. .head {
  2.   background-color: #c82519;
  3.   height: 4.5rem;
  4.   color: white;
  5.   position: fixed;
  6.   top: 0;
  7.   left: 0;
  8.   right: 0;
  9.   display: flex;
  10.   z-index: 9;
  11. }
  12. .head .caidan {
  13.   font-size: 2rem;
  14.   text-align: center;
  15.   flex: 1;
  16.   position: relative;
  17.   top: 1rem;
  18. }
  19. .head .sousuo {
  20.   flex: 6;
  21.   display: flex;
  22.   background-color: white;
  23.   color: #c82519;
  24.   font-size: 2rem;
  25.   justify-content: space-evenly;
  26.   border-radius: 2.5rem;
  27.   height: 3rem;
  28.   position: relative;
  29.   top: 0.8rem;
  30.   align-items: center;
  31. }
  32. .head .sousuo > p {
  33.   font-weight: bolder;
  34.   color: #e93b3d;
  35. }
  36. .head .sousuo .sousuotubiao {
  37.   font-size: 2rem;
  38.   color: #dbdbdb;
  39.   border-left: 1px solid #dddddd;
  40.   padding-left: 1rem;
  41. }
  42. .head .sousuo > input {
  43.   border: none;
  44.   outline: medium;
  45. }
  46. .head .login {
  47.   font-size: 1.5rem;
  48.   text-align: center;
  49.   flex: 1;
  50.   position: relative;
  51.   top: 1rem;
  52. }

footer.css代码：

  1. li{
  2.     list-style: none;
  3. }
  4. .footer{
  5.     height: 5rem;
  6.     background-color: #FFFFFF;
  7.     position: fixed;
  8.     bottom: 0;
  9.     right: 0;
  10.     left: 0;
  11.     box-shadow: 0 0 5px #E2DFDF;
  12.     z-index: 1;
  14. }
  15. .footer ur{
  16.     display: flex;
  17.     justify-content:space-around;
  18.     position:relative;
  19.     top: 1rem;
  21. }
  22. .footer ur li{
  23.     flex-direction: column;
  24.     display: flex;
  25.     align-items: center;
  26.     font-size: 2rem;
  27.     color: #8B8B8B;
  28.     position:relative;
  29.     bottom: 1rem;
  30.     padding-top: 6px;
  31. }
  32. .footer ur li:hover{
  33.     color: red;
  34. }
  35. .footer ur li>span{
  36.     font-size: 0.5rem;   
  37. }

main.css代码：

  1. @import url(/css/maincd.css);
  2. @import url(/css/sp.css);
  3. .main {
  4.   z-index: -1;
  5.   margin-top: 4.5rem;
  6.   margin-bottom: 5rem;
  7.   background-color: #f6f6f6;
  8. }
  9. .main .banner {
  10.   background-color: #c82519;
  11.   height: 10rem;
  12.   border-bottom-left-radius: 5rem;
  13.   border-bottom-right-radius: 5rem;
  14. }
  15. .main .banner > img {
  16.   height: 14rem;
  17.   width: 35.5rem;
  18.   max-width: 40rem;
  19.   border-radius: 1rem;
  20.   position: absolute;
  21.   left: 1rem;
  23.   top: 4.5rem;
  24. }

maincd.css代码：

  1. .main .maincd {
  2.   margin-top: 5rem;
  3.   display: flex;
  4.   flex-wrap: wrap;
  5.   justify-content: space-around;
  6.   margin-bottom: 2rem;
  7. }
  8. .main .maincd > a {
  9.   display: flex;
  10.   flex-direction: column;
  11.   text-decoration: none;
  12.   color: #7e7e7e;
  13.   align-items: center;
  14.   margin-bottom: 1rem;
  15.   width: 6.6rem;
  16. }
  17. .main .maincd > a > span {
  18.   font-size: 1.2rem;
  19.   margin-top: 0.6rem;
  20. }
  21. .main .maincd > a > img {
  22.   width: 4rem;
  23.   height: 4rem;
  24.   text-align: center;
  25. }
  26. .miaosha {
  27.   background-color: #fff;
  28.   position: relative;
  29.   left: 0;
  30.   right: 0;
  31.   height: 13.5rem;
  32.   margin-left: 1rem;
  33.   margin-right: 1rem;
  34.   border-radius: 1rem;
  35.   margin-bottom: 1rem;
  36.   display: flex;
  37.   flex-direction: column;
  38.   /* text-decoration: none; */
  39. }
  40. .miaosha .miaoshatop {
  41.   display: flex;
  42.   justify-content: space-between;
  43. }
  44. .miaosha .miaoshatop > a {
  45.   text-decoration: none;
  46.   /* color: #222222; */
  47. }
  48. .miaosha .miaoshatop > a:first-of-type {
  49.   color: #222;
  50.   flex: 2;
  51.   margin-top: 1rem;
  52.   margin-left: 1rem;
  53.   font-size: 1.4rem;
  54.   display: flex;
  55.   justify-content: space-between;
  56. }
  57. .miaosha .miaoshatop > a:last-of-type {
  58.   color: #f23121;
  59.   flex: 2;
  60.   margin-right: 1rem;
  61.   margin-top: 1rem;
  63.   font-size: 1.2rem;
  64.   display: flex;
  65.   justify-content: flex-end;
  66. }
  67. .miaosha .miaoshatop > a:first-of-type > div:first-of-type + div {
  68.   color: red;
  69. }
  70. .miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div {
  71.   display: flex;
  72.   justify-content: flex-end;
  73. }
  74. .miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div > span {
  75.   color: red;
  76. }
  77. .miaosha .miaoshatop > a:first-of-type > div:first-of-type + div + div > div {
  78.   background-color: red;
  79.   color: white;
  80.   border-radius: 0.5rem;
  81.   width: auto;
  82. }
  83. .miaoshamain .miaoshaul {
  84.   display: flex;
  85.   justify-content: space-between;
  86.   text-align: center;
  87. }
  88. .miaoshamain .miaoshaul .miaoshali {
  89.   width: 5.7rem;
  90. }
  91. .miaoshamain .miaoshaul .miaoshali > div > img {
  92.   height: 5.5rem;
  93.   width: 5.5rem;
  94.   margin-top: 1rem;
  95.   /* margin-bottom: 1rem; */
  96. }
  97. .miaoshamain .miaoshaul .miaoshali > div:last-of-type {
  98.   display: flex;
  99.   flex-direction: column;
  100.   font-size: 1rem;
  101. }
  102. .miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:first-of-type {
  103.   color: red;
  104. }
  105. .miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:last-of-type {
  106.   color: #999;
  107.   position: relative;
  108. }
  109. .miaoshamain .miaoshaul .miaoshali > div:last-of-type > span:last-of-type > hr {
  110.   width: 3rem;
  111.   position: absolute;
  112.   top: 1rem;
  113.   left: 2rem;
  114. }

sp.css代码：

  1. .sp .spul {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4. }
  5. .sp .spul .spli {
  6.   width: 17rem;
  7.   min-height: 26rem;
  8.   background-color: #fff;
  9.   border-radius: 1rem;
  10.   margin-left: 1rem;
  11.   margin-top: 1rem;
  12. }
  14. .sp .spul .spli .spimg > img {
  15.   width: 17rem;
  16.   border-radius: 1rem 1rem 0 0;
  17. }
  18. .sp .spul .spli .sptext {
  19.   font-size: 1.2rem;
  20.   margin-left: 0.5rem;
  21.   margin-right: 0.5rem;
  22.   height: 3rem;
  23.   width: auto;
  24.   -webkit-line-clamp: 2;
  25.   display: -webkit-box;
  26.   overflow: hidden;
  27.   -webkit-box-orient: vertical;
  28.   text-overflow: ellipsis;
  29. }
  30. .sp .spul .spli .splook {
  31.   display: flex;
  32.   margin-left: 0.5rem;
  34.   margin-top: 1rem;
  35.   justify-content: space-between;
  36. }
  37. .sp .spul .spli .splook a {
  38.   text-decoration: none;
  39. }
  40. .sp .spul .spli .splook a:first-of-type {
  41.   color: red;
  42. }
  43. .sp .spul .spli .splook a:last-of-type {
  44.   background-color: #f0f2f5;
  45.   color: #808080;
  46.   border-radius: 1rem 0rem 0 1rem;
  47.   width: 4.5rem;
  48.   font-size: 1rem;
  49.   text-align: right;
  50.   padding: 0.2rem;
  51. }
上一条：字符串、数组函数、分支和循环下一条：十种常用编程语言特点 1
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多