search

博客列表 >模仿京东手机端

模仿京东手机端

不忘初心
不忘初心原创
2021年07月23日 14:02:29395浏览

模仿京东手机端

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="static/css/index.css">
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  9.     <link rel="stylesheet" href="static/css/header.css">
  10.     <link rel="stylesheet" href="static/css/footer.css">
  11.     <link rel="stylesheet" href="static/css/nav.css">
  12.     <link rel="stylesheet" href="static/css/tj.css">
  13.     <link rel="stylesheet" href="static/css/ms.css">
  14. </head>
  15. <body>
  16.         <!---页眉--->
  17.         <div class="header">
  18.         <!--左-->
  19.         <div class="menu iconfont icon-menu"></div>
  20.         <!--中-->
  21.         <div class="search">
  22.             <div class="logo">JD</div>
  23.             <div class="zoom iconfont icon-search"></div>
  24.             <input type="text" value="华为Mate40" class="words">
  25.         </div>
  26.         <!--右-->
  27.         <a href="" class="login">登陆</a>
  28.     </div>
  29.     <!---主体--->
  30.     <div class="main">
  31.         <ul class="nav">
  32.             <li>
  33.                 <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  34.                 <a href="">京东超市</a>
  35.             </li>
  36.             <li>
  37.                 <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  38.                 <a href="">数码电器</a>
  39.             </li>
  40.             <li>
  41.                 <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  42.                 <a href="">京东服饰</a>
  43.             </li>
  44.             <li>
  45.                 <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  46.                 <a href="">京东生鲜</a>
  47.             </li>
  48.             <li>
  49.                 <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  50.                 <a href="">京东到家</a>
  51.             </li>
  52.             <li>
  53.                 <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  54.                 <a href="">充值缴费</a>
  55.             </li>
  56.             <li>
  57.                 <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  58.                 <a href="">9.9元拼</a>
  59.             </li>
  60.             <li>
  61.                 <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  62.                 <a href="">领券</a>
  63.             </li>
  64.             <li>
  65.                 <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  66.                 <a href="">领津贴</a>
  67.             </li>
  68.             <li>
  69.                 <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  70.                 <a href="">PLUS会员</a>
  71.             </li>
  72.         </ul>
  73.         <div class="ms">
  74.             <!-- 秒杀头部 -->
  75.             <div class="ms-top">
  76.              <div class="left">
  77.                <div class="title">京东秒杀</div>
  78.                <div class="notice">
  79.                  <div class="tips">20点专场</div>
  80.                  <div class="time">01:40:33</div>
  81.                </div>
  82.              </div>
  83.              <div class="right">更多秒杀</div>
  84.            </div>
  85.            <!-- 秒杀主体区 -->
  86.             <ul class="ms-body">
  87.               <li class="item">
  88.                 <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  89.                 <div class="iconfont icon-rmb">338</div>
  90.                 <div class="iconfont icon-rmb">558</div>
  91.               </li>
  92.               <li class="item">
  93.                 <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  94.                 <div class="iconfont icon-rmb">3456</div>
  95.                 <div class="iconfont icon-rmb">4567</div>
  96.               </li>
  97.               <li class="item">
  98.                 <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  99.                 <div class="iconfont icon-rmb">789</div>
  100.                 <div class="iconfont icon-rmb">999</div>
  101.               </li>
  102.               <li class="item">
  103.                 <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  104.                 <div class="iconfont icon-rmb">3213</div>
  105.                 <div class="iconfont icon-rmb">4532</div>
  106.               </li>
  108.             </ul>
  109.         </div>
  110.         <!---推荐商品区--->
  111.         <ul class="tj">
  112.             <li class="item">
  113.                 <a href=""><img src="static/images/sp/sp-1.webp" alt=""></a>
  114.                 <p>标题省略标题省略标题省略标题省略标题省略标题省略标题省略</p>
  115.                 <div class="price">
  116.                     <div class="iconfont icon-rmb">79</div>
  117.                     <div>看相似</div>
  118.                 </div>
  119.             </li>
  120.             <li class="item">
  121.                 <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  122.                 <p>标题省略</p>
  123.                 <div class="price">
  124.                     <div class="iconfont icon-rmb">79</div>
  125.                     <div>看相似</div>
  126.                 </div>
  127.             </li>
  128.             <li class="item">
  129.                 <a href=""><img src="static/images/sp/sp-3.webp" alt=""></a>
  130.                 <p>标题省略</p>
  131.                 <div class="price">
  132.                     <div class="iconfont icon-rmb">79</div>
  133.                     <div>看相似</div>
  134.                 </div>
  135.             </li>
  136.             <li class="item">
  137.                 <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  138.                 <p>标题省略</p>
  139.                 <div class="price">
  140.                     <div class="iconfont icon-rmb">79</div>
  141.                     <div>看相似</div>
  142.                 </div>
  143.             </li>
  144.             <li class="item">
  145.                 <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  146.                 <p>标题省略</p>
  147.                 <div class="price">
  148.                     <div class="iconfont icon-rmb">79</div>
  149.                     <div>看相似</div>
  150.                 </div>
  151.             </li>
  152.             <li class="item">
  153.                 <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  154.                 <p>标题省略</p>
  155.                 <div class="price">
  156.                     <div class="iconfont icon-rmb">79</div>
  157.                     <div>看相似</div>
  158.                 </div>
  159.             </li>
  160.         </ul>
  161.     </div>
  162.     <!---页脚--->
  163.     <div class="footer">
  164.         <div>
  165.             <!-- 上面放图标 -->
  166.             <div class="iconfont icon-home"></div>
  167.             <!-- 下面放文本 -->
  168.             <span>首页</span>
  169.           </div>
  171.           <div>
  172.             <div class="iconfont icon-home"></div>
  173.             <span>分类</span>
  174.           </div>
  175.           <div>
  176.             <div class="iconfont icon-home"></div>
  177.             <span>京喜</span>
  178.           </div>
  179.           <div>
  180.             <div class="iconfont icon-home"></div>
  181.             <span>购物车</span>
  182.           </div>
  183.           <div>
  184.             <div class="iconfont icon-home"></div>
  185.             <span>未登录</span>
  186.           </div>
  187.     </div>
  188. </body>
  189. </html>
上一条：nginx设置跨域下一条：jquery $()的参数和选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多