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.     <link rel="stylesheet" href="css/index.css" />
  8.     <link rel="stylesheet" href="icon-font/iconfont.css" />
  9.     <link rel="stylesheet" href="css/header.css" />
  10.     <link rel="stylesheet" href="css/footer.css" />
  11.     <link rel="stylesheet" href="css/main.css" />
  12.     <title>JD</title>
  13.   </head>
  14.   <body>
  15.     <header>
  16.       <div class="iconfont icon-menu"></div>
  17.       <div class="search">
  18.         <div class="log">JD</div>
  19.         <div class="iconfont icon-search"></div>
  20.         <input type="text" class="words" value="新疆棉" />
  21.       </div>
  22.       <a href="" class="login">登入</a>
  23.     </header>
  24.     <main>
  25.       <ul class="nav">
  26.         <li>
  27.           <a href=""><img src="images/dh/nav-1.png" alt="" /></a>
  28.           <a href="">京东超市</a>
  29.         </li>
  30.         <li>
  31.           <a href=""><img src="images/dh/nav-2.png" alt="" /></a>
  32.           <a href="">数码电器</a>
  33.         </li>
  34.         <li>
  35.           <a href=""><img src="images/dh/nav-3.png" alt="" /></a>
  36.           <a href="">京东服饰</a>
  37.         </li>
  38.         <li>
  39.           <a href=""><img src="images/dh/nav-4.png" alt="" /></a>
  40.           <a href="">京东生鲜</a>
  41.         </li>
  42.         <li>
  43.           <a href=""><img src="images/dh/nav-5.png" alt="" /></a>
  44.           <a href="">京东到家</a>
  45.         </li>
  46.         <!-- 第二组 -->
  47.         <li>
  48.           <a href=""><img src="images/dh/nav-6.png" alt="" /></a>
  49.           <a href="">充值缴费</a>
  50.         </li>
  51.         <li>
  52.           <a href=""><img src="images/dh/nav-7.png" alt="" /></a>
  53.           <a href="">9.9元拼</a>
  54.         </li>
  55.         <li>
  56.           <a href=""><img src="images/dh/nav-8.png" alt="" /></a>
  57.           <a href="">领券</a>
  58.         </li>
  59.         <li>
  60.           <a href=""><img src="images/dh/nav-9.png" alt="" /></a>
  61.           <a href="">领金贴</a>
  62.         </li>
  63.         <li>
  64.           <a href=""><img src="images/dh/nav-10.png" alt="" /></a>
  65.           <a href="">PLUS会员</a>
  66.         </li>
  67.       </ul>
  69.       <div class="ms">
  70.         <!-- 秒杀头部 -->
  71.         <div class="ms-top">
  72.           <div class="left">
  73.             <div class="title">京东秒杀</div>
  74.             <div class="notice">
  75.               <div class="tips">20点专场</div>
  76.               <div class="time">01:40:33</div>
  77.             </div>
  78.           </div>
  79.           <div class="right">更多秒杀</div>
  80.         </div>
  81.         <!-- 秒杀图片 -->
  82.         <ul class="ms-body">
  83.           <li class="item">
  84.             <a href=""><img src="images/ms/ms-1.jpg" alt="" /></a>
  85.             <div class="iconfont icon-rmb">338</div>
  86.             <div class="iconfont icon-rmb">558</div>
  87.           </li>
  88.           <li class="item">
  89.             <a href=""><img src="images/ms/ms-2.jpg" alt="" /></a>
  90.             <div class="iconfont icon-rmb">3456</div>
  91.             <div class="iconfont icon-rmb">4567</div>
  92.           </li>
  93.           <li class="item">
  94.             <a href=""><img src="images/ms/ms-3.jpg" alt="" /></a>
  95.             <div class="iconfont icon-rmb">789</div>
  96.             <div class="iconfont icon-rmb">999</div>
  97.           </li>
  98.           <li class="item">
  99.             <a href=""><img src="images/ms/ms-4.jpg" alt="" /></a>
  100.             <div class="iconfont icon-rmb">3213</div>
  101.             <div class="iconfont icon-rmb">4532</div>
  102.           </li>
  103.         </ul>
  104.       </div>
  105.       <!-- 推荐 -->
  106.       <ul class="tj">
  107.         <li class="item">
  108.           <a href=""><img src="images/sp/sp-1.webp" alt="" /></a>
  109.           <p>
  110.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  111.           </p>
  112.           <div class="price">
  113.             <div class="iconfont icon-rmb">138</div>
  114.             <div>看相似</div>
  115.           </div>
  116.         </li>
  117.         <li class="item">
  118.           <a href=""><img src="images/sp/sp-2.webp" alt="" /></a>
  119.           <p>
  120.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  121.           </p>
  122.           <div class="price">
  123.             <div class="iconfont icon-rmb">203</div>
  124.             <div>看相似</div>
  125.           </div>
  126.         </li>
  127.         <li class="item">
  128.           <a href=""><img src="images/sp/sp-3.webp" alt="" /></a>
  129.           <p>
  130.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  131.           </p>
  132.           <div class="price">
  133.             <div class="iconfont icon-rmb">203</div>
  134.             <div>看相似</div>
  135.           </div>
  136.         </li>
  137.         <li class="item">
  138.           <a href=""><img src="images/sp/sp-4.webp" alt="" /></a>
  139.           <p>
  140.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  141.           </p>
  142.           <div class="price">
  143.             <div class="iconfont icon-rmb">203</div>
  144.             <div>看相似</div>
  145.           </div>
  146.         </li>
  147.         <li class="item">
  148.           <a href=""><img src="images/sp/sp-5.webp" alt="" /></a>
  149.           <p>
  150.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  151.           </p>
  152.           <div class="price">
  153.             <div class="iconfont icon-rmb">203</div>
  154.             <div>看相似</div>
  155.           </div>
  156.         </li>
  157.         <li class="item">
  158.           <a href=""><img src="images/sp/sp-6.webp" alt="" /></a>
  159.           <p>
  160.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍
  161.           </p>
  162.           <div class="price">
  163.             <div class="iconfont icon-rmb">203</div>
  164.             <div>看相似</div>
  165.           </div>
  166.         </li>
  167.       </ul>
  168.     </main>
  169.     <footer>
  170.       <div>
  171.         <div class="iconfont icon-home"></div>
  172.         <span>首页</span>
  173.       </div>
  174.       <div>
  175.         <div class="iconfont icon-home"></div>
  176.         <span>分类</span>
  177.       </div>
  178.       <div>
  179.         <div class="iconfont icon-home"></div>
  180.         <span>惊喜</span>
  181.       </div>
  182.       <div>
  183.         <div class="iconfont icon-home"></div>
  184.         <span>购物车</span>
  185.       </div>
  186.       <div>
  187.         <div class="iconfont icon-home"></div>
  188.         <span>未登入</span>
  189.       </div>
  190.     </footer>
  191.   </body>
  192. </html>

CSS代码

初始化

  1. main > .nav {
  2.   display: flex;
  3.   flex-flow: row wrap;
  4.   padding: 1rem;
  5. }
  7. main > .nav img {
  8.   height: 4rem;
  9.   width: 4rem;
  10. }
  12. main .nav li {
  13.   flex-basis: 20%;
  14.   display: flex;
  15.   flex-flow: column wrap;
  16.   align-items: center;
  17. }
  19. main .ms {
  20.   background: white;
  21.   padding: 1rem;
  22.   margin: 1rem 0;
  23. }
  25. main > .ms > .ms-top {
  26.   font-size: 1.3rem;
  27.   height: 3rem;
  28.   display: flex;
  29.   justify-content: space-between;
  30. }
  31. main > .ms > .ms-top > .left {
  32.   display: flex;
  33. }
  34. main > .ms > .ms-top > .left .notice {
  35.   display: flex;
  36.   height: 2rem;
  37.   font-size: 1rem;
  38.   border: 1px solid red;
  39.   border-radius: 2rem;
  40.   align-items: center;
  41.   justify-content: center;
  42. }
  44. main > .ms > .ms-top > .left .tips {
  45.   color: red;
  46.   background: pink;
  47.   border-radius: 2rem;
  48.   padding: 0.3rem 0.5rem;
  49. }
  51. main > .ms > .ms-top > .right {
  52.   color: red;
  53.   font-size: 1.3rem;
  54. }
  56. main > .ms > .ms-body {
  57.   display: flex;
  58.   justify-content: space-around;
  59. }
  61. main > .ms > .ms-body > .item {
  62.   text-align: center;
  63. }
  65. main > .ms > .ms-body > img {
  66.   height: 12rem;
  67.   width: 12rem;
  68. }
  70. main > .ms > .ms-body > .item > div:first-of-type {
  71.   color: red;
  72.   font-weight: border;
  73. }
  75. main > .ms > .ms-body > .item > div:last-of-type {
  76.   text-decoration-line: line-through;
  77. }
  79. /* 推荐区 */
  80. main > .tj {
  81.   font-size: 1.1rem;
  82.   color: grey;
  83.   display: flex;
  84.   flex-flow: row wrap;
  85.   justify-content: center;
  86. }
  88. main .tj .item {
  89.   flex-basis: calc(50% - 3rem);
  90.   padding: 1rem;
  91.   background: white;
  92.   display: flex;
  93.   flex-flow: column nowrap;
  94.   margin-left: 1rem;
  95.   margin-bottom: 1rem;
  96.   border-radius: 1rem;
  97. }
  99. main .tj .item:nth-of-type(even) {
  100.   margin-right: 1rem;
  101. }
  103. main > .tj > .item img {
  104.   width: 100%;
  105.   height: 100%;
  106. }
  107. main .tj .item .price {
  108.   display: flex;
  109.   justify-content: space-between;
  110. }
  112. main .tj .item .price div:first-of-type {
  113.   color: red;
  114.   font-weight: bolder;
  115. }
  116. main .tj .item .price div:last-of-type {
  117.   background-color: #f6f6f6;
  118.   border-radius: 1rem;
  119.   padding: 0.2rem 1rem;
  120.   color: #666;
  121. }

头部

  1. header {
  2.   display: flex;
  3.   flex-flow: row nowrap;
  4.   align-items: center;
  5. }
  7. .iconfont.icon-menu {
  8.   flex: 1;
  9.   text-align: center;
  10.   font-size: 2.5rem;
  11. }
  13. header .search {
  14.   background: white;
  15.   flex: 6;
  16.   border-style: inset;
  17.   border-color: white;
  18.   border-radius: 3rem;
  19.   display: flex;
  20.   padding: 0.5rem;
  21. }
  23. .search > .log {
  24.   color: red;
  25.   font-size: 2rm;
  26.   flex: 0 1 4rem;
  27.   text-align: center;
  28.   line-height: 2rem;
  29. }
  31. .search > .iconfont.icon-search {
  32.   color: black;
  33.   flex: 0 1 4rem;
  34.   text-align: center;
  35.   line-height: 2rem;
  36.   border-left: 1px solid grey;
  37. }
  39. .search > .words {
  40.   flex: auto;
  41.   border: none;
  42.   outline: none;
  43.   color: red;
  44. }
  46. header .login {
  47.   flex: 1;
  48.   color: white;
  49.   text-align: center;
  50. }

主体

  1. main > .nav {
  2.   display: flex;
  3.   flex-flow: row wrap;
  4.   padding: 1rem;
  5. }
  7. main > .nav img {
  8.   height: 4rem;
  9.   width: 4rem;
  10. }
  12. main .nav li {
  13.   flex-basis: 20%;
  14.   display: flex;
  15.   flex-flow: column wrap;
  16.   align-items: center;
  17. }
  19. main .ms {
  20.   background: white;
  21.   padding: 1rem;
  22.   margin: 1rem 0;
  23. }
  25. main > .ms > .ms-top {
  26.   font-size: 1.3rem;
  27.   height: 3rem;
  28.   display: flex;
  29.   justify-content: space-between;
  30. }
  31. main > .ms > .ms-top > .left {
  32.   display: flex;
  33. }
  34. main > .ms > .ms-top > .left .notice {
  35.   display: flex;
  36.   height: 2rem;
  37.   font-size: 1rem;
  38.   border: 1px solid red;
  39.   border-radius: 2rem;
  40.   align-items: center;
  41.   justify-content: center;
  42. }
  44. main > .ms > .ms-top > .left .tips {
  45.   color: red;
  46.   background: pink;
  47.   border-radius: 2rem;
  48.   padding: 0.3rem 0.5rem;
  49. }
  51. main > .ms > .ms-top > .right {
  52.   color: red;
  53.   font-size: 1.3rem;
  54. }
  56. main > .ms > .ms-body {
  57.   display: flex;
  58.   justify-content: space-around;
  59. }
  61. main > .ms > .ms-body > .item {
  62.   text-align: center;
  63. }
  65. main > .ms > .ms-body > img {
  66.   height: 12rem;
  67.   width: 12rem;
  68. }
  70. main > .ms > .ms-body > .item > div:first-of-type {
  71.   color: red;
  72.   font-weight: border;
  73. }
  75. main > .ms > .ms-body > .item > div:last-of-type {
  76.   text-decoration-line: line-through;
  77. }
  79. /* 推荐区 */
  80. main > .tj {
  81.   font-size: 1.1rem;
  82.   color: grey;
  83.   display: flex;
  84.   flex-flow: row wrap;
  85.   justify-content: center;
  86. }
  88. main .tj .item {
  89.   flex-basis: calc(50% - 3rem);
  90.   padding: 1rem;
  91.   background: white;
  92.   display: flex;
  93.   flex-flow: column nowrap;
  94.   margin-left: 1rem;
  95.   margin-bottom: 1rem;
  96.   border-radius: 1rem;
  97. }
  99. main .tj .item:nth-of-type(even) {
  100.   margin-right: 1rem;
  101. }
  103. main > .tj > .item img {
  104.   width: 100%;
  105.   height: 100%;
  106. }
  107. main .tj .item .price {
  108.   display: flex;
  109.   justify-content: space-between;
  110. }
  112. main .tj .item .price div:first-of-type {
  113.   color: red;
  114.   font-weight: bolder;
  115. }
  116. main .tj .item .price div:last-of-type {
  117.   background-color: #f6f6f6;
  118.   border-radius: 1rem;
  119.   padding: 0.2rem 1rem;
  120.   color: #666;
  121. }

页脚

  1. footer {
  2.   display: flex;
  3.   justify-content: space-around;
  4.   align-items: center;
  5. }
  7. footer > div {
  8.   display: flex;
  9.   flex-flow: column nowrap;
  10.   align-items: center;
  11. }
  13. footer > .iconfont {
  14.   font-size: 2rem;
  15. }
  17. footer > div > span {
  18.   font-size: 1rem;
  19. }
  21. footer > div:hover {
  22.   cursor: pointer;
  23. }

总体定位

  1. @import url("reset.css");
  3. /* 头部 */
  4. header {
  5.   background-color: red;
  6.   color: white;
  7.   height: 4.4rem;
  8.   position: fixed;
  9.   left: 0;
  10.   right: 0;
  11.   top: 0;
  13.   z-index: 100;
  14. }
  16. /* 主题 */
  17. main {
  18.   position: absolute;
  19.   top: 4.4rem;
  20.   right: 0;
  21.   left: 0;
  22.   bottom: 4.4rem;
  23. }
  25. /* 页脚 */
  26. footer {
  27.   background-color: gray;
  28.   color: white;
  29.   height: 4.4rem;
  30.   position: fixed;
  31.   left: 0;
  32.   right: 0;
  33.   bottom: 0;
  34. }

更多相关文章

  1. FTP文件传输协议介绍和常用命令
  2. Lindorm原理 | Lindorm全文索引技术介绍
  3. 0325作业-flex项目上的三个属性及手机端布局
  4. 仿写京东商城
  5. 商品详情页要做好的三件事
  6. VRRP技术技术介绍及华为资料分享！
  7. Docker基本组件、概念介绍
  8. 介绍几种常见的作图软件
  9. flea-frame-db使用之JPA封装介绍

随机推荐

  1. 网易云音乐评论爬取。
  2. Javascript的对象拷贝[每日前端夜话0x53]
  3. 使用ESLint + Prettier简化代码 Review
  4. Edge 拥抱 Chromium 对前端工程师意味着
  5. 数据整合与数据清洗。
  6. 跟繁琐的命令行说拜拜！Gerapy分布式爬虫管
  7. TensorFlow layers模块用法
  8. Mybatis if, set, where 动态sql和sql片
  9. 99%的人都不知道的pandas骚操作（一）
  10. TensorFlow RNN Cell源码解析