1. <!DOCTYPE html>
  2. <html lang="en">
  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="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/ms.css" />
  13.     <link rel="stylesheet" href="static/css/tj.css" />
  14.     <title>页眉+页脚+主导航+秒杀区+推荐商品列表区</title>
  15.   </head>
  16.   <body>
  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" class="words" value="移动硬盘5000g" id="" />
  25.       </div>
  26.       <!-- 登录按钮 -->
  27.       <a href="" class="login">登录</a>
  28.     </div>
  29.     <!-- 主体 -->
  30.     <div class="main">
  31.       <!-- 主导航区 -->
  32.       <ul class="nav">
  33.         <li>
  34.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  35.           <a href="">京东超市</a>
  36.         </li>
  37.         <li>
  38.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  39.           <a href="">数码电器</a>
  40.         </li>
  41.         <li>
  42.           <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  43.           <a href="">京东服饰</a>
  44.         </li>
  45.         <li>
  46.           <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  47.           <a href="">京东生鲜</a>
  48.         </li>
  49.         <li>
  50.           <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  51.           <a href="">充值缴费</a>
  52.         </li>
  53.         <li>
  54.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  55.           <a href="">9.9元拼</a>
  56.         </li>
  57.         <li>
  58.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  59.           <a href="">领劵</a>
  60.         </li>
  61.         <li>
  62.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  63.           <a href="">领津贴</a>
  64.         </li>
  65.         <li>
  66.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  67.           <a href="">PLUS会员</a>
  68.         </li>
  69.         <li>
  70.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  71.           <a href="">数码电器</a>
  72.         </li>
  73.       </ul>
  74.       <!-- 秒杀区 -->
  75.       <div class="ms">
  76.         <div class="ms-top">
  77.           <div class="left">
  78.             <div class="title">京东秒杀</div>
  79.             <div class="notice">
  80.               <div class="tips">20点专场</div>
  81.               <div class="time">01：40：33</div>
  82.             </div>
  83.           </div>
  84.           <div class="right">更多秒杀</div>
  85.         </div>
  86.         <!-- 秒杀主体区 -->
  87.         <ul class="ms-body">
  88.           <li class="item">
  89.             <a href=""><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  90.             <div class="iconfont icon-rmb">338</div>
  91.             <div class="iconfont icon-rmb">558</div>
  92.           </li>
  93.           <li class="item">
  94.             <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  95.             <div class="iconfont icon-rmb">338</div>
  96.             <div class="iconfont icon-rmb">558</div>
  97.           </li>
  98.           <li class="item">
  99.             <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  100.             <div class="iconfont icon-rmb">338</div>
  101.             <div class="iconfont icon-rmb">558</div>
  102.           </li>
  103.           <li class="item">
  104.             <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  105.             <div class="iconfont icon-rmb">338</div>
  106.             <div class="iconfont icon-rmb">558</div>
  107.           </li>
  108.         </ul>
  109.       </div>
  111.       <!-- 推荐商品列表区 -->
  112.       <ul class="tj">
  113.         <li class="item">
  114.           <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  115.           <p>
  116.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  117.           </p>
  118.           <div class="price">
  119.             <div class="iconfont icon-rmb">138</div>
  120.             <div>看相似</div>
  121.           </div>
  122.         </li>
  123.         <li class="item">
  124.           <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  125.           <p>
  126.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  127.           </p>
  128.           <div class="price">
  129.             <div class="iconfont icon-rmb">138</div>
  130.             <div>看相似</div>
  131.           </div>
  132.         </li>
  133.         <li class="item">
  134.           <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  135.           <p>
  136.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  137.           </p>
  138.           <div class="price">
  139.             <div class="iconfont icon-rmb">138</div>
  140.             <div>看相似</div>
  141.           </div>
  142.         </li>
  143.         <li class="item">
  144.           <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  145.           <p>
  146.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  147.           </p>
  148.           <div class="price">
  149.             <div class="iconfont icon-rmb">138</div>
  150.             <div>看相似</div>
  151.           </div>
  152.         </li>
  153.         <li class="item">
  154.           <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  155.           <p>
  156.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  157.           </p>
  158.           <div class="price">
  159.             <div class="iconfont icon-rmb">138</div>
  160.             <div>看相似</div>
  161.           </div>
  162.         </li>
  163.         <li class="item">
  164.           <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  165.           <p>
  166.             商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
  167.           </p>
  168.           <div class="price">
  169.             <div class="iconfont icon-rmb">138</div>
  170.             <div>看相似</div>
  171.           </div>
  172.         </li>
  173.       </ul>
  174.     </div>
  175.     <!-- 页脚 -->
  176.     <div class="footer">
  177.       <div>
  178.         <div class="iconfont icon-home"></div>
  179.         <span>首页</span>
  180.       </div>
  181.       <div>
  182.         <div class="iconfont icon-home"></div>
  183.         <span>分类</span>
  184.       </div>
  185.       <div>
  186.         <div class="iconfont icon-home"></div>
  187.         <span>京喜</span>
  188.       </div>
  189.       <div>
  190.         <div class="iconfont icon-home"></div>
  191.         <span>购物车</span>
  192.       </div>
  193.       <div>
  194.         <div class="iconfont icon-home"></div>
  195.         <span>未登录</span>
  196.       </div>
  197.     </div>
  198.   </body>
  199. </html>

reset.css

  1. * {
  2.   margin: 0px;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. li {
  7.   /* 去掉前面的点 */
  8.   list-style: none;
  9. }
  10. a {
  11.   /* 去掉下划线 */
  12.   text-decoration: none;
  13.   color: #7b7b7b;
  14. }
  15. body {
  16.   background-color: #f6f6f6;
  17. }
  18. html {
  19.   font-size: 10px;
  20. }
  21. body {
  22.   font-size: 1.6rem;
  23. }
  24. @media screen and (min-width: 480px) {
  25.   html {
  26.     font-size: 12px;
  27.   }
  28. }
  29. @media screen and (min-width: 640px) {
  30.   html {
  31.     font-size: 14px;
  32.   }
  33. }
  34. @media screen and (min-width: 720px) {
  35.   html {
  36.     font-size: 16px;
  37.   }
  38. }

index.css

  1. /* @import url("reset.css"); */
  2. @import "reset.css";
  3. .header {
  4.   background-color: #e43130;
  5.   color: #fff;
  6.   height: 4.4rem;
  7.   /* 固定定位 */
  8.   position: fixed;
  9.   left: 0;
  10.   top: 0;
  11.   right: 0;
  12.   /* 保证他始终在视口的最前面 */
  13.   z-index: 100;
  14. }
  15. /* 主体绝对定位 */
  16. .main {
  17.   position: absolute;
  18.   top: 4.4rem;
  19.   left: 0;
  20.   right: 0;
  21.   bottom: 4.4rem;
  22. }
  23. .footer {
  24.   background-color: #eee;
  25.   color: #fff;
  26.   height: 4.4rem;
  27.   /* 固定定位 */
  28.   position: fixed;
  29.   left: 0;
  30.   bottom: 0;
  31.   right: 0;
  32.   z-index: 100;
  33. }

footer.css

  1. .footer {
  2.   display: flex;
  3.   justify-content: space-around;
  4.   align-items: center;
  5.   color: #666;
  6. }
  7. .footer > div {
  8.   display: flex;
  9.   flex-flow: column nowrap;
  10.   /* 主轴垂直  交叉轴水平 */
  11.   align-items: center;
  12. }
  13. .footer > div .iconfont {
  14.   font-size: 2rem;
  15. }
  16. .footer > div > span {
  17.   font-size: 1rem;
  18. }
  19. .footer > div:hover {
  20.   cursor: pointer;
  21. }

header.css

  1. /* 使用一个类作为入口，后面可以使用class或伪类来获取内部的每一个元素。 */
  2. .header {
  3.   display: flex;
  4.   flex-flow: row nowrap;
  5.   align-items: center;
  6. }
  7. .header .menu {
  8.   flex: 1;
  9.   /* 行内元素 文本居中 */
  10.   text-align: center;
  11.   font-size: 2.5rem;
  12. }
  13. .header .login {
  14.   flex: 1;
  15.   color: white;
  16.   text-align: center;
  17. }
  18. .header .search {
  19.   flex: 6;
  20.   padding: 0.5rem;
  21.   background-color: #fff;
  22.   /* 圆角 */
  23.   border-radius: 3rem;
  24.   display: flex;
  25. }
  26. .header .search .logo {
  27.   color: #e43130;
  28.   font-size: 2rem;
  29.   flex: 0 1 4rem;
  30.   text-align: center;
  31.   line-height: 2rem;
  32. }
  33. .header .search .zoom {
  34.   color: #ccc;
  35.   flex: 0 1 4rem;
  36.   text-align: center;
  37.   /* 垂直居中 */
  38.   line-height: 2rem;
  39.   border-left: 1px solid;
  40. }
  41. .header .search .words {
  42.   flex: auto;
  43.   border: none;
  44.   outline: none;
  45.   color: #aaa;
  46. }

nav.css

  1. /* 主导航区样式 */
  3. /* 图片 */
  4. .main nav img {
  5.   height: 4rem;
  6.   width: 4rem;
  7. }
  8. /* 导航区 */
  9. .main .nav {
  10.   /* border: 1px solid #000; */
  11.   padding: 1rem;
  12.   display: flex;
  13.   /* 转为多行容器 */
  14.   flex-flow: row wrap;
  15. }
  16. .main .nav li {
  17.   flex-grow: 1;
  18.   flex-shrink: 0;
  19.   flex-basis: 20%;
  20.   /* border: 1px solid #000; */
  21.   /* flex: 1 1 20%; */
  22.   display: flex;
  23.   flex-flow: column nowrap;
  24.   align-items: center;
  25. }

tj.css

  1. .main .tj {
  2.   font-size: 1.1rem;
  3.   color: #555;
  4.   display: flex;
  5.   /* 当前一行只显示两个 所以转为多行容器  允许换行 */
  6.   flex-flow: row wrap;
  7.   justify-content: center;
  8. }
  9. .main .tj .item {
  10.   flex-basis: calc(50% - 3rem);
  11.   padding: 1rem;
  12.   background-color: #fff;
  13.   display: flex;
  14.   flex-flow: column nowrap;
  16.   /* 添加外边距 */
  17.   margin-left: 1rem;
  18.   margin-bottom: 1rem;
  19.   border-radius: 1rem;
  20. }
  21. .main .th .item:nth-of-type(2n) {
  22.   margin-right: 1rem;
  23. }
  24. .main .tj .item img {
  25.   width: 100%;
  26.   height: 100%;
  27. }
  28. .main .tj .item .price {
  29.   display: flex;
  30.   justify-content: space-between;
  31. }
  32. .main .tj .item .price div:first-of-type {
  33.   color: red;
  34.   font-weight: bolder;
  35. }
  36. .main .tj .item .price div:last-of-type {
  37.   background-color: #f6f6f6;
  38.   padding: 0.2rem 1rem;
  39.   border-radius: 1rem;
  40.   color: #666;
  41. }

更多相关文章

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

随机推荐

  1. Android 执行Shell命令
  2. android 通过webservice方式向服务器上传
  3. Android中自定义Dialog常用的两种方式
  4. Android去除默认USB调试授权确认框
  5. android 拍照
  6. Android之手机壁纸的改变
  7. Android学习笔记(四) android 更换桌面壁
  8. Android中编译工具链的改动----LLVM份量
  9. Android调用系统程序
  10. android 中让activity全屏幕显示