简体中文（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月20日 16:41:41462浏览

运行效果

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

相关文章

查看更多