search

博客列表 >仿京东移动端首页

仿京东移动端首页

培(信仰)
培(信仰)原创
2020年12月29日 15:53:45780浏览

仿京东移动端首页

检验之前所学内容，查漏补缺

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>仿京东移动版</title>
  8.     <!-- 字体图标 -->
  9.     <link rel="stylesheet" href="./static/icon-font/iconfont.css">
  10.     <!-- 首页样式 -->
  11.     <link rel="stylesheet" href="./static/CSS/index.css">
  12.     <!-- 页眉样式 -->
  13.     <link rel="stylesheet" href="./static/CSS/header.css">
  14.     <!-- 主体 -->
  15.     <!-- 打开APP -->
  16.     <link rel="stylesheet" href="./static/CSS/openApp.css">
  17.     <!-- 导航菜单 -->
  18.     <link rel="stylesheet" href="./static/CSS/nav.css">
  19.     <!-- 秒杀 -->
  20.     <link rel="stylesheet" href="./static/CSS/ms.css">
  21.     <!-- 猜你喜欢 -->
  22.     <link rel="stylesheet" href="./static/CSS/tj.css">
  23.     <!-- 页脚 -->
  24.     <link rel="stylesheet" href="./static/CSS/footer.css">
  25. </head>
  27. <body>
  28.     <!-- 页眉 -->
  29.     <header class="header">
  30.         <!-- 字体图标 -->
  31.         <div class="menu iconfont icon-menu"></div>
  32.         <!-- 搜索框 -->
  33.         <div class="search">
  34.             <div class="logo">JD</div>
  35.             <div class="zoom iconfont icon-search"></div>
  36.             <input type="text" class="word" placeholder="电脑">
  37.         </div>
  38.         <!-- 登录按钮 -->
  39.         <a href="" class="login">登录</a>
  40.     </header>
  41.     <!-- 主体 -->
  42.     <div class="openApp">
  43.         <a href="">
  44.             <img src="./static/images/jddog.png" alt="">
  45.             <span>打开APP</span>
  46.         </a>
  47.     </div>
  48.     <main class="main">
  49.         <!-- 轮播图 -->
  50.         <div class="lbpic">
  51.             <a href="">
  52.                 <img src="./static/images/bg/bg.jpg" alt="">
  53.             </a>
  54.         </div>
  55.         <!-- 主导航菜单 -->
  56.         <nav class="nav">
  57.             <ul>
  58.                 <li>
  59.                     <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  60.                     <a href="">京东超市</a>
  61.                 </li>
  62.                 <li>
  63.                     <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  64.                     <a href="">数码电器</a>
  65.                 </li>
  66.                 <li>
  67.                     <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  68.                     <a href="">京东服饰</a>
  69.                 </li>
  70.                 <li>
  71.                     <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  72.                     <a href="">京东生鲜</a>
  73.                 </li>
  74.                 <li>
  75.                     <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  76.                     <a href="">京东到家</a>
  77.                 </li>
  78.                 <li>
  79.                     <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  80.                     <a href="">充值缴费</a>
  81.                 </li>
  82.                 <li>
  83.                     <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  84.                     <a href="">9.9元拼</a>
  85.                 </li>
  86.                 <li>
  87.                     <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  88.                     <a href="">领券</a>
  89.                 </li>
  90.                 <li>
  91.                     <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  92.                     <a href="">领金贴</a>
  93.                 </li>
  94.                 <li>
  95.                     <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  96.                     <a href="">PLUS会员</a>
  97.                 </li>
  98.             </ul>
  99.         </nav>
  100.         <!-- 秒杀 -->
  101.         <div class="ms">
  102.             <div class="ms-top">
  103.                 <div class="left">
  104.                     <div class="title">京东秒杀</div>
  105.                     <div class="notice">
  106.                         <div class="tips">10点场</div>
  107.                         <div class="time">10:10:10</div>
  108.                     </div>
  109.                 </div>
  110.                 <div class="right"><a href="">更多秒杀</a></div>
  111.             </div>
  112.             <div class="ms-body">
  113.                 <li class="item">
  114.                     <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  115.                     <div class="iconfont icon-rmb">3790</div>
  116.                     <div class="iconfont icon-rmb">4590</div>
  117.                 </li>
  118.                 <li class="item">
  119.                     <a href=""><img src="static/images/ms/ms-2.jpg" alt=""></a>
  120.                     <div class="iconfont icon-rmb">69</div>
  121.                     <div class="iconfont icon-rmb">139</div>
  122.                 </li>
  123.                 <li class="item">
  124.                     <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  125.                     <div class="iconfont icon-rmb">159</div>
  126.                     <div class="iconfont icon-rmb">219</div>
  127.                 </li>
  128.                 <li class="item">
  129.                     <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  130.                     <div class="iconfont icon-rmb">299</div>
  131.                     <div class="iconfont icon-rmb">850</div>
  132.                 </li>
  133.                 <li class="item">
  134.                     <a href=""><img src="static/images/ms/ms-5.jpg" alt=""></a>
  135.                     <div class="iconfont icon-rmb">7099</div>
  136.                     <div class="iconfont icon-rmb">7499</div>
  137.                 </li>
  138.                 <li class="item">
  139.                     <a href=""><img src="static/images/ms/ms-6.jpg" alt=""></a>
  140.                     <div class="iconfont icon-rmb">238</div>
  141.                     <div class="iconfont icon-rmb">329</div>
  142.                 </li>
  143.             </div>
  144.         </div>
  145.         <!-- 猜你喜欢 -->
  146.         <h2 class="tj-title">猜你喜欢</h2>
  147.         <ul class="tj">
  148.             <li class="item">
  149.                 <a href="">
  150.                     <div><img src="static/images/tj/tj-1.jpg" alt=""></div>
  151.                     <p>商品介绍 商品介绍 商品介绍 商品介绍</p>
  152.                     <span class="iconfont icon-rmb">138</span>
  153.                     <span>看相似</span>
  154.                 </a>
  155.             </li>
  156.             <li class="item">
  157.                 <a href="">
  158.                     <div><img src="static/images/tj/tj-2.jpg" alt=""></div>
  159.                     <p>商品介绍 商品介绍 商品介绍 商品介绍</p>
  160.                     <span class="iconfont icon-rmb">138</span>
  161.                     <span>看相似</span>
  162.                 </a>
  163.             </li>
  164.             <li class="item">
  165.                 <a href="">
  166.                     <div><img src="static/images/tj/tj-3.jpg" alt=""></div>
  167.                     <p>商品介绍 商品介绍 商品介绍 商品介绍</p>
  168.                     <span class="iconfont icon-rmb">138</span>
  169.                     <span>看相似</span>
  170.                 </a>
  171.             </li>
  172.             <li class="item">
  173.                 <a href="">
  174.                     <div><img src="static/images/tj/tj-4.jpg" alt=""></div>
  175.                     <p>商品介绍 商品介绍 商品介绍 商品介绍</p>
  176.                     <span class="iconfont icon-rmb">138</span>
  177.                     <span>看相似</span>
  178.                 </a>
  179.             </li>
  180.             <li class="item">
  181.                 <a href="">
  182.                     <div><img src="static/images/tj/tj-5.jpg" alt=""></div>
  183.                     <p>商品介绍 商品介绍 商品介绍 商品介绍</p>
  184.                     <span class="iconfont icon-rmb">138</span>
  185.                     <span>看相似</span>
  186.                 </a>
  187.             </li>
  188.             <li class="item">
  189.                 <a href="">
  190.                     <div><img src="static/images/tj/tj-6.jpg" alt=""></div>
  191.                     <p>商品介绍 商品介绍 商品介绍 商品介绍</p>
  192.                     <span class="iconfont icon-rmb">138</span>
  193.                     <span>看相似</span>
  194.                 </a>
  195.             </li>
  197.         </ul>
  198.     </main>
  199.     <!-- 页脚 -->
  200.     <footer class="footer">
  201.         <a href="">
  202.             <div class="iconfont icon-home"></div>
  203.             <span>主页</span>
  204.         </a>
  205.         <a href="">
  206.             <div class="iconfont icon-layers"></div>
  207.             <span>分类</span>
  208.         </a>
  209.         <a href="">
  210.             <div class="iconfont icon-kehuguanli"></div>
  211.             <span>京喜</span>
  212.         </a>
  213.         <a href="">
  214.             <div class="iconfont icon-shopping-cart"></div>
  215.             <span>购物车</span>
  216.         </a>
  217.         <a href="">
  218.             <div class="iconfont icon-user"></div>
  219.             <span>未登录</span>
  220.         </a>
  221.     </footer>
  222. </body>
  224. </html>

static/css/reset.css

  1. /* 初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. li {
  9.     list-style: none;
  10. }
  11. a {
  12.     color: #7b7b7b;
  13.     text-decoration: none;
  14. }
  16. body {
  17.     background-color: #F6F6F6;
  18. }
  20. html {
  21.     font-size: 10px;
  22. }
  24. /* 媒体查询 */
  25. @media screen and (min-width: 480px) {
  26.     html {
  27.         font-size: 12px;
  28.     }
  29. }
  31. @media screen and (min-width: 640px) {
  32.     html {
  33.         font-size: 14px;
  34.     }
  35. }
  37. @media screen and (min-width: 720px) {
  38.     html {
  39.         font-size: 16px;
  40.     }
  41. }

static/css/index.css

  1. /* 导入初始样式 */
  3. @import './reset.css';
  4. /* 页眉样式 */
  6. .header {
  7.     background-color: #e43130;
  8.     height: 4.4rem;
  9.     color: white;
  10.     position: fixed;
  11.     top: 0;
  12.     left: 0;
  13.     right: 0;
  14.     z-index: 100;
  15. }
  17. /* 主体 */
  19. .main {
  20.     background-color: #f6f6f6;
  21.     position: absolute;
  22.     top: 4.4rem;
  23.     left: 0;
  24.     right: 0;
  25.     bottom:5rem;
  26. }
  28. /* 页脚 */
  30. .footer {
  31.     background-color: #fafafa;
  32.     height: 5rem;
  33.     color: #666;
  34.     box-shadow: 0 0 3px #999;
  35.     position: fixed;
  36.     bottom: 0;
  37.     left: 0;
  38.     right: 0;
  39.     z-index: 200;
  40. }

static/css/header.css

  1. /* 页眉 */
  2. .header {
  3.     display: flex;
  4.     align-items: center;
  5. }
  7. .header .menu{
  8.     text-align: center;
  9.     flex:1;
  10.     font-size: 2.5rem;
  11. }
  13. .header .search {
  14.     text-align: center;
  15.     padding:0.5rem;
  16.     flex:6;
  17.     display: flex;
  18.     align-items: center;
  19.     background-color: #f6f6f6;
  20.     border-radius: 3rem;
  21.     height: 3rem;
  22. }
  24. .header .search .logo {
  25.     align-self: center;
  26.     color:#e43130;
  27.     font-size: 2rem;
  28.     margin: 1.5rem;
  29.     line-height: 2rem;
  30. }
  32. .header .search .zoom {
  33.     align-self: center;
  34.     flex:0 1 4rem;
  35.     color:#ccc;
  36.     border-left: 1px solid;
  37.     text-align: center;
  38.     line-height: 2rem;
  39. }
  40. .header .search .word {
  41.     flex:auto;
  42.     border:none;
  43.     outline: none;
  44.     background-color: #f6f6f6;
  45.     color:#aaa;
  46. }
  48. .header .login {
  49.     flex:1;
  50.     text-align: center;
  51.     color:white;
  52.     font-size: 1.5rem;
  53. }

static/css/nav.css

  1. /* 主导航 */
  2. .main .lbpic {
  3.     height: 9.35rem;
  4.     text-align: center;
  5.     background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519));
  6. }
  8. .main .lbpic  > a, .main .lbpic  img {
  9.     overflow: hidden;
  10. }
  11. .main .lbpic  > a {
  12.     width: -webkit-calc(100% - 1.25rem);
  13.     width: calc(100% - 1.25rem);
  14.     height: 9.35rem;
  15.     border-radius: .35rem;
  16.     line-height: 9.35;
  17. }
  19. .main .lbpic img {
  20.     height: 9.35rem;
  21.     vertical-align: middle
  22. }
  24. .main .nav {
  25.     top: 9.5rem;
  26. }
  28. .main .nav ul {
  29.     padding: 1rem;
  30.     display: flex;
  31.     flex-flow: row wrap;
  32.     justify-content: space-between;
  33.     /* top:9.35rem; */
  34. }
  36. .main .nav img {
  37.     height: 4rem;
  38.     width: 4rem;
  39. }
  41. .main .nav li {
  42.     flex: 1 1 20%;
  43.     display: flex;
  44.     flex-flow: column nowrap;
  45.     align-items: center;
  46. }

static/css/ms.css

  1. /* 秒杀 */
  3. .main .ms {
  4.     background-color: #fff;
  5.     border-radius: 1rem;
  6.     padding: 1rem;
  7.     margin: 1rem 0;
  8. }
  10. .main .ms .ms-top {
  11.     font-size: 1.3rem;
  12.     height: 3rem;
  13.     display: flex;
  14.     justify-content: space-between;
  15. }
  17. .main .ms .ms-top .left {
  18.     display: flex;
  19. }
  21. .main .ms .ms-top .notice {
  22.     font-size: 1.1rem;
  23.     height: 2rem;
  24.     border: 1px solid #e43130;
  25.     border-radius: 2rem;
  26.     margin-left: 1rem;
  27.     display: flex;
  28.     justify-content: center;
  29.     align-items: center;
  30. }
  32. .main .ms .ms-top .left .notice .tips {
  33.     background-color: #e43130;
  34.     color: white;
  35.     border-radius: 2rem;
  36.     padding: 0.3rem 0.5rem;
  37. }
  39. .main .ms .ms-top .notice .time {
  40.     padding: 0.3rem 0.5rem;
  41. }
  43. .main .ms .ms-top .right a{
  44.     color: #e43130;
  45. }
  47. /* 主题区 */
  49. .main .ms .ms-body {
  50.     display: flex;
  51.     flex-flow: row nowrap;
  52.     justify-content: space-between;
  53.     overflow: scroll;
  54.     height: 10rem;
  55. }
  57. .main .ms .ms-body .item img {
  58.     width: 6rem;
  59.     height: 6rem;
  60. }
  62. .main .ms .ms-body .item div {
  63.     font-size: 1.1rem;
  64.     text-align: center;
  65. }
  67. .main .ms .ms-body .item .iconfont:first-of-type {
  68.     color: #e43130;
  69. }
  71. .main .ms .ms-body .item .iconfont:last-of-type{
  72.     color: #666666;
  73.     text-decoration: line-through;
  74.     text-decoration-color: #666666;
  75. }

static/css/openApp.css

  1. /* 打开app */
  2. .openApp {
  3.     border: 1px solid #fff;    
  4.     background-color: rgba(255, 0, 0, 0.8);
  5.     z-index: 100;
  6.     /* 绝对定位 */
  7.     position: absolute;
  8.     /* 局顶部5.5rem */
  9.     top:5.8rem;
  10.     left:auto;
  11.     /* 靠右 */
  12.     right: 0;
  14.     height: 3.2rem;
  15.     width: 9rem;
  16.     border-top-left-radius:30rem ;
  17.     border-bottom-left-radius:30rem ;
  18. }
  20. .openApp img {
  21.     width: 3rem;
  22.     border:1px solid #fff;
  23.     border-radius: 30rem;
  24.     vertical-align: middle
  27. }
  28. .openApp a {
  29.     color:white;
  30.     font-size: 1.25rem;
  31. }

static/css/tj.css

  1. /* 猜你喜欢 */
  2. .main .tj-title {
  3.     text-align: center;
  4.     height: 4rem;
  5.     line-height: 4rem;
  6.     font-weight: 500;
  7.     color:#555;
  8. }
  10. .main .tj {
  11.     display: flex;
  12.     flex-flow: wrap;
  13. }
  15. .main .tj .item {
  16.     flex:1 1 calc(50%-2rem);
  17.     overflow: hidden;
  18.     display: flex;  
  19.     flex-flow: column nowrap;
  20.     width: 50%; 
  21.     height: 50%;
  22.     position: relative;
  23. }
  25. .main .tj .item:nth-of-type(odd){
  26.     padding-right: 0.5rem;
  27.     padding-left:1rem;
  28.     padding-bottom: 1rem;
  29. }
  31. .main .tj .item:nth-of-type(even){
  32.     padding-left: .5rem;
  33.     padding-right: 1rem;
  34.     padding-bottom: 1rem;
  35. }
  37. .main .tj .item img {
  38.     width: 100%;
  39.     height: 100%;
  40.     border-top-left-radius: 1rem;
  41.     border-top-right-radius: 1rem;
  42. }
  44. .main .tj .item span:first-of-type{
  45.     color: red;
  46.     font-size: 1rem;
  47. }
  49. .main .tj .item span:last-of-type{
  50.     position:absolute;
  51.     right: 0;
  52.     background-color: #ccc;
  53.     border-radius: 1rem;
  54.     padding:.25rem;
  55. }

效果图

效果图

通过此次操作对css选择器有个更多的认识。对flex和position也有了更深的体会。

上一条：自学Vue第一节课：Hello Vue下一条：宣传海报用什么软件做？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多