模仿京东手机端


`<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="static/css/index.css">
<link rel="stylesheet" href="static/icon-font/iconfont.css">
<link rel="stylesheet" href="static/css/header.css">
<link rel="stylesheet" href="static/css/footer.css">
<link rel="stylesheet" href="static/css/nav.css">
<link rel="stylesheet" href="static/css/tj.css">
<link rel="stylesheet" href="static/css/ms.css">
</head>

<body>
<!---页眉--->
<div class="header">
<!--左-->
<div class="menu iconfont icon-menu"></div>
<!--中-->
<div class="search">
<div class="logo">JD</div>
<div class="zoom iconfont icon-search"></div>
<input type="text" value="华为Mate40" class="words">
</div>
<!--右-->
<a href="" class="login">登陆</a>
</div>
<!---主体--->
<div class="main">
<ul class="nav">
<li>
<a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
<a href="">京东超市</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
<a href="">数码电器</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
<a href="">京东服饰</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
<a href="">京东生鲜</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
<a href="">京东到家</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
<a href="">充值缴费</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
<a href="">9.9元拼</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
<a href="">领券</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
<a href="">领津贴</a>
</li>
<li>
<a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
<a href="">PLUS会员</a>
</li>
</ul>
<div class="ms">
<!-- 秒杀头部 -->
<div class="ms-top">
<div class="left">
<div class="title">京东秒杀</div>
<div class="notice">
<div class="tips">20点专场</div>
<div class="time">01:40:33</div>
</div>
</div>
<div class="right">更多秒杀</div>
</div>
<!-- 秒杀主体区 -->
<ul class="ms-body">
<li class="item">
<a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
<div class="iconfont icon-rmb">338</div>
<div class="iconfont icon-rmb">558</div>
</li>
<li class="item">
<a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
<div class="iconfont icon-rmb">3456</div>
<div class="iconfont icon-rmb">4567</div>
</li>
<li class="item">
<a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
<div class="iconfont icon-rmb">789</div>
<div class="iconfont icon-rmb">999</div>
</li>
<li class="item">
<a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
<div class="iconfont icon-rmb">3213</div>
<div class="iconfont icon-rmb">4532</div>
</li>

  1. </ul>
  2. </div>
  3. <!---推荐商品区--->
  4. <ul class="tj">
  5. <li class="item">
  6. <a href=""><img src="static/images/sp/sp-1.webp" alt=""></a>
  7. <p>标题省略标题省略标题省略标题省略标题省略标题省略标题省略</p>
  8. <div class="price">
  9. <div class="iconfont icon-rmb">79</div>
  10. <div>看相似</div>
  11. </div>
  12. </li>
  13. <li class="item">
  14. <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  15. <p>标题省略</p>
  16. <div class="price">
  17. <div class="iconfont icon-rmb">79</div>
  18. <div>看相似</div>
  19. </div>
  20. </li>
  21. <li class="item">
  22. <a href=""><img src="static/images/sp/sp-3.webp" alt=""></a>
  23. <p>标题省略</p>
  24. <div class="price">
  25. <div class="iconfont icon-rmb">79</div>
  26. <div>看相似</div>
  27. </div>
  28. </li>
  29. <li class="item">
  30. <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  31. <p>标题省略</p>
  32. <div class="price">
  33. <div class="iconfont icon-rmb">79</div>
  34. <div>看相似</div>
  35. </div>
  36. </li>
  37. <li class="item">
  38. <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  39. <p>标题省略</p>
  40. <div class="price">
  41. <div class="iconfont icon-rmb">79</div>
  42. <div>看相似</div>
  43. </div>
  44. </li>
  45. <li class="item">
  46. <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  47. <p>标题省略</p>
  48. <div class="price">
  49. <div class="iconfont icon-rmb">79</div>
  50. <div>看相似</div>
  51. </div>
  52. </li>
  53. </ul>
  54. </div>
  55. <!---页脚--->
  56. <div class="footer">
  57. <div>
  58. <!-- 上面放图标 -->
  59. <div class="iconfont icon-home"></div>
  60. <!-- 下面放文本 -->
  61. <span>首页</span>
  62. </div>
  63. <div>
  64. <div class="iconfont icon-home"></div>
  65. <span>分类</span>
  66. </div>
  67. <div>
  68. <div class="iconfont icon-home"></div>
  69. <span>京喜</span>
  70. </div>
  71. <div>
  72. <div class="iconfont icon-home"></div>
  73. <span>购物车</span>
  74. </div>
  75. <div>
  76. <div class="iconfont icon-home"></div>
  77. <span>未登录</span>
  78. </div>
  79. </div>

</body>
</html>`