Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿京东移动端首页
Blogger Information
Blog 36
fans 1
comment 0
visits 26432
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
463 people have browsed it

运行效果

html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>仿京东移动端</title>
  8.     <link rel="stylesheet" href="static/css/index.css">
  9. </head>
  10. <body>
  11.     <!-- 页眉 -->
  12.     <header>
  13.         <a href="" class="iconfont icon-caidan"></a>
  14.         <a href="" class="sec">
  15.             <span class="iconfont icon-jingdong1"></span>
  16.             <span class="iconfont icon-iconfontfangdajing"></span>
  17.             <span>请输入产品名称</span>
  18.         </a>
  19.         <a href="">登录</a>
  20.     </header>
  21.     <!-- 主体 -->
  22.     <main>
  23.         <!-- 焦点图片 -->
  24.         <div class="top-img">
  25.             <img src="static/images/lunbo.jpg" alt="">
  26.         </div>
  27.         <!-- 导航 -->
  28.         <ul class="main-nav">
  29.             <li class="item">
  30.                 <a href=""><img src="static/images/jdcs.png" alt=""></a>
  31.                 <a href="">京东超市</a>
  32.             </li>
  33.             <li class="item">
  34.                 <a href=""><img src="static/images/smdq.png" alt=""></a>
  35.                 <a href="">数码电器</a>
  36.             </li>
  37.             <li class="item">
  38.                 <a href=""><img src="static/images/jdxbh.png" alt=""></a>
  39.                 <a href="">京东新百货</a>
  40.             </li>
  41.             <li class="item">
  42.                 <a href=""><img src="static/images/jdsx.png" alt=""></a>
  43.                 <a href="">京东生鲜</a>
  44.             </li>
  45.             <li class="item">
  46.                 <a href=""><img src="static/images/jddj.png" alt=""></a>
  47.                 <a href="">京东到家</a>
  48.             </li>
  49.             <li class="item">
  50.                 <a href=""><img src="static/images/czjf.png" alt=""></a>
  51.                 <a href="">充值缴费</a>
  52.             </li>
  53.             <li class="item">
  54.                 <a href=""><img src="static/images/fjhd.png" alt=""></a>
  55.                 <a href="">附近好店</a>
  56.             </li>
  57.             <li class="item">
  58.                 <a href=""><img src="static/images/lj.png" alt=""></a>
  59.                 <a href="">领券</a>
  60.             </li>
  61.             <li class="item">
  62.                 <a href=""><img src="static/images/ljt.png" alt=""></a>
  63.                 <a href="">领金贴</a>
  64.             </li>
  65.             <li class="item">
  66.                 <a href=""><img src="static/images/pulshy.png" alt=""></a>
  67.                 <a href="">PLUS会员</a>
  68.             </li>
  69.         </ul>
  70.         <!-- 秒杀 -->
  71.         <div class="main-ms">
  72.             <div class="main-ms-t">
  73.                 <a href="">京东秒杀</a>
  74.                 <a href="" class="main-ms-bd">8点场</a>
  75.                 <a href="" class="main-ms-tspan">
  76.                     <span>00</span>:
  77.                     <span>55</span>:
  78.                     <span>45</span>
  79.                 </a>
  80.                 <a href="">爆款轮番秒<img src="static/images/anniu.png" alt=""></a>
  81.             </div>
  82.             <div class="main-ms-b">
  83.                 <ul class="mmain-ms-b-list">
  84.                     <li>
  85.                         <a href=""><img src="static/images/jdms/01.jpg" alt=""></a>
  86.                         <a href="">￥195</a>
  87.                     </li>
  88.                     <li>
  89.                         <a href=""><img src="static/images/jdms/02.jpg" alt=""></a>
  90.                         <a href="">￥195</a>
  91.                     </li>
  92.                     <li>
  93.                         <a href=""><img src="static/images/jdms/03.jpg" alt=""></a>
  94.                         <a href="">￥195</a>
  95.                     </li>
  96.                     <li>
  97.                         <a href=""><img src="static/images/jdms/04.jpg" alt=""></a>
  98.                         <a href="">￥195</a>
  99.                     </li>
  100.                     <li>
  101.                         <a href=""><img src="static/images/jdms/05.jpg" alt=""></a>
  102.                         <a href="">￥195</a>
  103.                     </li>
  104.                 </ul>
  105.             </div>
  106.         </div>
  107.         <!-- 商品列表 -->
  108.         <ul class="list">
  109.             <li>
  110.                 <a href=""><img src="static/images/prod/01.webp" alt=""></a>
  111.                 <a href="">商品标题</a>
  112.                 <a href="">￥195</a>
  113.             </li>
  114.             <li>
  115.                 <a href=""><img src="static/images/prod/02.webp" alt=""></a>
  116.                 <a href="">商品标题</a>
  117.                 <a href="">￥195</a>
  118.             </li>
  119.             <li>
  120.                 <a href=""><img src="static/images/prod/03.webp" alt=""></a>
  121.                 <a href="">商品标题</a>
  122.                 <a href="">￥195</a>
  123.             </li>
  124.             <li>
  125.                 <a href=""><img src="static/images/prod/04.webp" alt=""></a>
  126.                 <a href="">商品标题</a>
  127.                 <a href="">￥195</a>
  128.             </li>
  129.             <li>
  130.                 <a href=""><img src="static/images/prod/05.webp" alt=""></a>
  131.                 <a href="">商品标题</a>
  132.                 <a href="">￥195</a>
  133.             </li>
  134.             <li>
  135.                 <a href=""><img src="static/images/prod/06.webp" alt=""></a>
  136.                 <a href="">商品标题</a>
  137.                 <a href="">￥195</a>
  138.             </li>
  139.             <li>
  140.                 <a href=""><img src="static/images/prod/07.webp" alt=""></a>
  141.                 <a href="">商品标题</a>
  142.                 <a href="">￥195</a>
  143.             </li>
  144.             <li>
  145.                 <a href=""><img src="static/images/prod/08.webp" alt=""></a>
  146.                 <a href="">商品标题</a>
  147.                 <a href="">￥195</a>
  148.             </li>
  149.         </ul>
  150.     </main>
  151.     <!-- 页脚 -->
  152.     <footer>
  153.         <a href="" class="f-nav">
  154.             <span class="iconfont icon-jingdong"></span>
  155.             <span>首页</span>
  156.         </a>
  157.         <a href="" class="f-nav">
  158.             <span class="iconfont icon-yingyongzhongxin"></span>
  159.             <span>分类</span>
  160.         </a>
  161.         <a href="" class="f-nav">
  162.             <span class="iconfont icon-xiajiang"></span>
  163.             <span>京喜</span>
  164.         </a>
  165.         <a href="" class="f-nav">
  166.             <span class="iconfont icon-gouwucheman"></span>
  167.             <span>购物车</span>
  168.         </a>
  169.         <a href="" class="f-nav">
  170.             <span class="iconfont icon-mine-red"></span>
  171.             <span>未登录</span>
  172.         </a>
  173.     </footer>
  174. </body>
  175. </html>

CSS样式

  1. @import url(font/iconfont.css);
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. html{
  8.     font-size: 100px;
  9. }
  10. body{
  11.     background-color: #f7f7f7;
  12.     font-size: 0.16rem;
  13. }
  14. @media(min-width:450px){
  15.     html{
  16.         font-size: 120px;
  17.         }
  18. }
  19. @media(max-width:370px){
  20.     html{
  21.         font-size: 75px;
  22.     }
  23. }
  24. li{
  25.     list-style: none;
  26. }
  27. a{
  28.     text-decoration: none;
  29.     color: #7a7a7a;
  30. }
  31. header,
  32. footer{
  33.     width: 100%;
  34.     height: 0.5rem;
  35.     background-color: white;
  36. }
  37. header{
  38.     position: fixed;
  39.     top:0;
  40.     left: 0;
  41.     display: grid;
  42.     grid-template-columns: 0.5rem 1fr 0.6rem;
  43.     place-items: center;
  44.     gap:0 0.1rem;
  45.     background-color: red;
  46. }
  47. header .icon-caidan{
  48.     font-size: 30px;
  49.     color: white;
  50. }
  51. header .sec{
  52.     width: 100%;
  53.     height: 30px;
  54.     background-color: white;
  55.     border-radius: 30px;
  56.     border: none;
  57.     padding-top: 0.04rem;
  58. }
  59. header .sec .icon-jingdong1{
  60.     padding: 0 0.1rem;
  61.     border-right: 1px solid rgb(179, 179, 179);
  62.     font-size: 15px;
  63.     color: red;
  64. }
  65. header .sec .icon-iconfontfangdajing{
  66.     font-size: 15px;
  67. }
  68. header .sec span{
  69.     font-size: 15px;
  70.     padding-left: 10px;
  71. }
  72. header > a:last-of-type{
  73.     font-size: 18px;
  74.     color: white;
  75. }
  77. footer{
  78.     position: fixed;
  79.     bottom: 0;
  80.     left: 0;
  81.     border-top: 1px solid rgb(212, 212, 212);
  82.     display: grid;
  83.     grid-template-columns: repeat(5 , 1fr);
  84.     gap:0 0.1rem;
  85.     place-items:center;
  86. }
  87. footer .f-nav{
  88.     display: grid;
  89.     grid-template-columns: 2 1fr;
  90.     /* font-size: 10px; */
  91.     place-items: center;
  92. }
  93. footer .f-nav .iconfont{
  94.     font-size: 0.2rem;
  95. }
  96. footer .f-nav span{
  97.     font-size: 0.1rem;
  98. }
  99. footer .f-nav:first-of-type{
  100.     color: red;
  101. }
  102. main{
  103.    position: relative;
  104.    top: 0.5rem;
  105.    /* overflow: hidden; */
  106.    /* z-index: -1px; */
  107. }
  108. main .top-img{
  109.     background-color: red;
  110.     padding: 0.1rem;
  111.     border-radius: 0 0 40% 40%;
  112. }
  113. main .top-img img{
  114.     width: 100%;
  115.     position: relative;
  116.     top: 20px;
  117.     border-radius: 0.1rem;   
  118. }
  119. main .main-nav{
  120.     display: grid;
  121.     grid-template-columns: repeat(5,1fr);
  122.     gap: 0 0.1rem;
  123.     padding: 0 0.1rem;
  124.     position: relative;
  125.     place-items: center;
  126.     top: 0.3rem;
  127. }
  128. main .main-nav .item{
  129.     display: grid;
  130.     grid-template-rows: 0.4rem 0.45rem;
  132. }
  133. main .main-nav .item a{
  134.     text-align: center;
  135.     font-size: 0.1rem;
  136. } 
  137. main .main-nav .item a img {
  138.     width: 0.4rem;
  139. }
  140. main .main-ms{
  141.     border-radius: 0.1rem;
  142.     background-color: white;
  143.     /* height: 500px; */
  144.     width: 90%;
  145.     margin: 0.2rem auto;
  146.     padding: 0.1rem;
  147. }
  148. main .main-ms .main-ms-t{
  149.     height: 0.5rem;
  150.     display: grid;
  151.     grid-template-columns: 0.9rem 0.5rem 1rem 1.5rem;
  152.     place-items: center;
  154. }
  155. main .main-ms .main-ms-t .main-ms-bd{
  156.     font-size: 0.13rem;
  157.     color: red;
  158. }
  159. main .main-ms .main-ms-t .main-ms-tspan{
  160.     color: red;
  161. }
  162. main .main-ms .main-ms-t .main-ms-tspan span{
  163.     background-color: red;
  164.     border-radius: 0.02rem;
  165.     color: white;
  166.     padding: 2px;
  167.     margin-right: 0.05rem;
  168. }
  169. main .main-ms .main-ms-t a:last-of-type{
  170.     color: red;
  171.     font-size: 0.15rem;
  172.     padding-left: 0.2rem;
  173. }
  174. main .main-ms .main-ms-t a img{
  175.     width: 0.15rem;
  176.     margin-left: 0.05rem;
  177.     padding-right: 0.03rem;
  178. }
  179. main .main-ms .main-ms-b{
  180.     margin-bottom: 0.5rem;
  181. }
  182. main .main-ms .main-ms-b .mmain-ms-b-list{
  183.     display: grid;
  184.     grid-template-columns: repeat(5,1fr);
  185.     gap: 0 0.05rem;
  186.     place-items: center;
  187. }
  188. main .main-ms .main-ms-b .mmain-ms-b-list li{
  189.     text-align: center;
  190. }
  191. main .main-ms .main-ms-b .mmain-ms-b-list a{
  192.     font-size: smaller;
  193.     color: red;
  194. }
  195. main .main-ms .main-ms-b .mmain-ms-b-list a img{
  196.     width: 0.6rem;
  197. }
  198. main .list{
  199.     display: grid;
  200.     grid-template-columns: repeat(2 , 1fr);
  201.     place-items: center;
  202.     gap: 0 0.1rem;
  203.     /* background-color: white;
  204.     border-radius: 0.2rem; */
  205.     width: 90%;
  206.     margin: auto ;
  207.     margin-bottom: 1rem;
  208.     /* padding: 0.1rem; */
  209. }
  210. main .list li{
  211.     background-color: white;
  212.     padding: 0.1rem;
  213.     border-radius: 0.2rem;
  214.     margin-bottom: 0.1rem;
  215. }
  216. main .list a{
  217.     display: block;
  218.     text-align: center;
  219. }
  220. main .list img{
  221.     width: 100%;
  222. }
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