search

博客列表 >尝试仿作“京东商城”手机网站

尝试仿作“京东商城”手机网站

华宥为
华宥为原创
2021年01月03日 20:06:03700浏览

尝试仿作“京东商城”手机网站

html部分

  2. <!DOCTYPE html>
  3. <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>
  9.     <!-- 字体图标 -->
  10.     <link rel="stylesheet" href="/1223/static/css/iconfont.css" />
  11.     <link rel="stylesheet" href="/1223/static/css/icon-font/iconfont.css" />
  12.     <!-- 首页 -->
  13.     <link rel="stylesheet" href="/1223/static/css/index.css" />
  14.     <!-- 页眉区 -->
  15.     <link rel="stylesheet" href="/1223/static/css/header.css" />
  16.     <!-- 导航 -->
  17.     <link rel="stylesheet" href="/1223/static/css/nav.css" />
  18.     <!-- 秒杀 -->
  19.     <link rel="stylesheet" href="/1223/static/css/ms.css" />
  20.     <!-- 猜你喜欢 -->
  21.     <link rel="stylesheet" href="/1223/static/css/tj.css" />
  22.     <!-- 页脚 -->
  23.     <link rel="stylesheet" href="/1223/static/css/footer.css" />
  24.   </head>
  25.   <body>
  26.     <!-- 页眉 -->
  27.     <div class="header">
  28.       <!-- 字体图标 -->
  29.       <div class="menu iconfont icon-V"></div>
  30.       <!-- 搜索框 -->
  31.       <div class="search">
  32.         <div class="logo">JD</div>
  33.         <div class="zoom iconfont icon-viewlarger"></div>
  34.         <input class="words" type="text" value="蓝牙鼠标" />
  35.       </div>
  36.       <!-- 登录按钮 -->
  37.       <a href="" class="login">登录</a>
  38.     </div>
  39.     <!-- 主体 -->
  40.     <div class="main">
  41.       <div>
  42.         <img class="pic-1" src="/1223/static/images/bg/banner.jpg" alt="" />
  43.       </div>
  44.       <!-- 主导航区 -->
  45.       <ul class="nav">
  46.         <li>
  47.           <a href=""
  48.             ><img src="/1223/static/images/shangpin (1).png" alt=""
  49.           /></a>
  50.           <a href="">京东超市</a>
  51.         </li>
  52.         <li>
  53.           <a href=""
  54.             ><img src="/1223/static/images/shangpin (2).png" alt=""
  55.           /></a>
  56.           <a href="">数码超市</a>
  57.         </li>
  58.         <li>
  59.           <a href=""
  60.             ><img src="/1223/static/images/shangpin (3).png" alt=""
  61.           /></a>
  62.           <a href="">京东服饰</a>
  63.         </li>
  64.         <li>
  65.           <a href=""
  66.             ><img src="/1223/static/images/shangpin (4).png" alt=""
  67.           /></a>
  68.           <a href="">京东生鲜</a>
  69.         </li>
  70.         <li>
  71.           <a href=""
  72.             ><img src="/1223/static/images/shangpin (5).png" alt=""
  73.           /></a>
  74.           <a href="">充值缴费</a>
  75.         </li>
  76.         <li>
  77.           <a href=""
  78.             ><img src="/1223/static/images/shangpin (6).png" alt=""
  79.           /></a>
  80.           <a href="">9.9元拼</a>
  81.         </li>
  82.         <li>
  83.           <a href=""
  84.             ><img src="/1223/static/images/shangpin (7).png" alt=""
  85.           /></a>
  86.           <a href="">领券</a>
  87.         </li>
  88.         <li>
  89.           <a href=""
  90.             ><img src="/1223/static/images/shangpin (8).png" alt=""
  91.           /></a>
  92.           <a href="">借钱</a>
  93.         </li>
  94.         <li>
  95.           <a href=""
  96.             ><img src="/1223/static/images/shangpin (9).png" alt=""
  97.           /></a>
  98.           <a href="">京东到家</a>
  99.         </li>
  100.         <li>
  101.           <a href=""
  102.             ><img src="/1223/static/images/shangpin (10).png" alt=""
  103.           /></a>
  104.           <a href="">PLUS会员</a>
  105.         </li>
  106.       </ul>
  108.       <!-- 秒杀区 -->
  109.       <div class="ms">
  110.         <div class="ms-top">
  111.           <div class="left">
  112.             <div class="title">京东秒杀</div>
  113.             <div class="notice">
  114.               <div class="tips">22点专场</div>
  115.               <div class="time">01:11:22</div>
  116.             </div>
  117.           </div>
  118.           <div class="right">更多秒杀</div>
  119.         </div>
  120.         <div class="ms-body">
  121.           <li class="item">
  122.             <a href=""><img src="/1223/static/images/ms- (1).png" alt="" /></a>
  123.             <div class="iconfont icon-rmb">338</div>
  124.             <div class="iconfont icon-rmb">558</div>
  125.           </li>
  126.           <li class="item">
  127.             <a href=""><img src="/1223/static/images/ms- (2).png" alt="" /></a>
  128.             <div class="iconfont icon-rmb">738</div>
  129.             <div class="iconfont icon-rmb">858</div>
  130.           </li>
  131.           <li class="item">
  132.             <a href=""><img src="/1223/static/images/ms- (3).png" alt="" /></a>
  133.             <div class="iconfont icon-rmb">6738</div>
  134.             <div class="iconfont icon-rmb">8858</div>
  135.           </li>
  136.           <li class="item">
  137.             <a href=""><img src="/1223/static/images/ms- (4).png" alt="" /></a>
  138.             <div class="iconfont icon-rmb">4568</div>
  139.             <div class="iconfont icon-rmb">5588</div>
  140.           </li>
  141.           <li class="item">
  142.             <a href=""><img src="/1223/static/images/ms- (5).png" alt="" /></a>
  143.             <div class="iconfont icon-rmb">1338</div>
  144.             <div class="iconfont icon-rmb">2558</div>
  145.           </li>
  146.         </div>
  147.       </div>
  148.       <!-- 猜你喜欢 -->
  149.       <h3 class="title">猜你喜欢</h3>
  150.       <ul class="tj">
  151.         <li class="item">
  152.           <a href=""><img src="/1223/static/images/sp/sp-1.webp" alt="" /></a>
  153.           <p>
  154.             php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  155.             2、完成网站所有静态页面布局；重点：弹性布局与网格布局；
  156.           </p>
  157.           <div class="price">
  158.             <div class="iconfont icon-rmb">203</div>
  159.             <div>看相似</div>
  160.           </div>
  161.         </li>
  163.         <li class="item">
  164.           <a href=""><img src="/1223/static/images/sp/sp-2.webp" alt="" /></a>
  165.           <p>
  166.             php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  167.             2、完成网站所有静态页面布局；重点：弹性布局与网格布局；
  168.           </p>
  169.           <div class="price">
  170.             <div class="iconfont icon-rmb">203</div>
  171.             <div>看相似</div>
  172.           </div>
  173.         </li>
  174.         <li class="item">
  175.           <a href=""><img src="/1223/static/images/sp/sp-3.webp" alt="" /></a>
  176.           <p>
  177.             php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  178.             2、完成网站所有静态页面布局；重点：弹性布局与网格布局；
  179.           </p>
  180.           <div class="price">
  181.             <div class="iconfont icon-rmb">203</div>
  182.             <div>看相似</div>
  183.           </div>
  184.         </li>
  185.         <li class="item">
  186.           <a href=""><img src="/1223/static/images/sp/sp-4.webp" alt="" /></a>
  187.           <p>
  188.             php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  189.             2、完成网站所有静态页面布局；重点：弹性布局与网格布局；
  190.           </p>
  191.           <div class="price">
  192.             <div class="iconfont icon-rmb">203</div>
  193.             <div>看相似</div>
  194.           </div>
  195.         </li>
  196.         <li class="item">
  197.           <a href=""><img src="/1223/static/images/sp/sp-5.webp" alt="" /></a>
  198.           <p>
  199.             php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  200.             2、完成网站所有静态页面布局；重点：弹性布局与网格布局；
  201.           </p>
  202.           <div class="price">
  203.             <div class="iconfont icon-rmb">203</div>
  204.             <div>看相似</div>
  205.           </div>
  206.         </li>
  207.         <li class="item">
  208.           <a href=""><img src="/1223/static/images/sp/sp-6.webp" alt="" /></a>
  209.           <p>
  210.             php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  211.             2、完成网站所有静态页面布局；重点：弹性布局与网格布局；
  212.           </p>
  213.           <div class="price">
  214.             <div class="iconfont icon-rmb">203</div>
  215.             <div>看相似</div>
  216.           </div>
  217.         </li>
  218.         <li class="item">
  219.           <a href=""><img src="/1223/static/images/sp/sp-7.webp" alt="" /></a>
  220.           <p>
  221.             php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  222.             2、完成网站所有静态页面布局；重点：弹性布局与网格布局；
  223.           </p>
  224.           <div class="price">
  225.             <div class="iconfont icon-rmb">203</div>
  226.             <div>看相似</div>
  227.           </div>
  228.         </li>
  229.         <li class="item">
  230.           <a href=""><img src="/1223/static/images/sp/sp-8.webp" alt="" /></a>
  231.           <p>
  232.             php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  233.           </p>
  234.           <div class="price">
  235.             <div class="iconfont icon-rmb">203</div>
  236.             <div>看相似</div>
  237.           </div>
  238.         </li>
  239.       </ul>
  240.     </div>
  242.     <!-- 页脚 -->
  243.     <div class="footer">
  244.       <div>
  245.         <div class="iconfont icon-home"></div>
  246.         <span>主页</span>
  247.       </div>
  248.       <div>
  249.         <div class="iconfont icon-layers"></div>
  250.         <span>分类</span>
  251.       </div>
  252.       <div>
  253.         <div class="iconfont icon-kehuguanli"></div>
  254.         <span>惊喜</span>
  255.       </div>
  256.       <div>
  257.         <div class="iconfont icon-shopping-cart"></div>
  258.         <span>购物车</span>
  259.       </div>
  260.       <div>
  261.         <div class="iconfont icon-user"></div>
  262.         <span>未登录</span>
  263.       </div>
  264.     </div>
  265.   </body>
  266. </html>

css部分

  • index.css
  1. @import "/1223/static/css/reset.css";
  3. /* 页眉 */
  4. .header {
  5.   background-color: #e43130;
  6.   color: white;
  7.   height: 3.5rem;
  8.   font-size: 1.4rem;
  9.   /* 固定定位 */
  10.   position: fixed;
  11.   top: 0;
  12.   left: 0;
  13.   right: 0;
  14.   z-index: 100;
  15. }
  16. /* 页脚 */
  17. .footer {
  18.   color: #666;
  19.   background-color: #fafafa;
  20.   box-shadow: 0 0 3px #999;
  21.   height: 4.4rem;
  22.   font-size: 1.4rem;
  23.   /* 固定定位 */
  24.   position: fixed;
  25.   bottom: 0;
  26.   left: 0;
  27.   right: 0;
  28.   z-index: 100;
  29. }
  30. /* 主体 */
  31. .main {
  32.   /* 绝对定位 */
  33.   position: absolute;
  34.   top: 4.4rem;
  35.   bottom: 4.4rem;
  36.   left: 0;
  37.   right: 0;
  38.   font-size: 1.4rem;
  39.   /* height: 100rem; */
  40.   /* background-color: yellow; */
  41. }
  • reset.css
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. li {
  8.   list-style: none;
  9. }
  11. a {
  12.   columns: #7b7b7b;
  13.   text-decoration: none;
  14. }
  15. body {
  16.   background-color: #f6f6f6;
  17. }
  19. html {
  20.   font-size: 10px;
  21. }
  22. /* 媒体查询 */
  23. @media screen and (min-width: 480px) {
  24.   html {
  25.     font-size: 12px;
  26.   }
  27. }
  28. @media screen and (min-width: 640px) {
  29.   html {
  30.     font-size: 14px;
  31.   }
  32. }
  33. @media screen and (min-width: 720px) {
  34.   html {
  35.     font-size: 16px;
  36.   }
  37. }
  • header.css
  1. .header {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5. /* 页眉中三个部分的比例 1：6：1 */
  6. .header .login {
  7.   flex: 1;
  8.   color: #fff;
  9.   text-align: center;
  10. }
  12. .header .menu {
  13.   flex: 1;
  14.   text-align: center;
  15.   font-size: 2rem;
  16. }
  17. .header .search {
  18.   flex: 6;
  19.   padding: 0.3rem 0.5rem;
  20.   background-color: #fff;
  21.   border-radius: 3rem;
  23.   display: flex;
  24. }
  26. .header .search .logo {
  27.   color: #e34130;
  28.   flex: 0 1 3rem;
  29.   font-size: 1.5rem;
  30.   /* padding: 0 0.2rem; */
  31.   /* 水平垂直居中 */
  32.   text-align: center;
  33.   /* align-items: center; */
  34.   line-height: 2rem;
  35. }
  37. .header .search .zoom {
  38.   color: #cccccc;
  39.   flex: 0 1 4 #ccc;
  40.   font-size: 2rem;
  41.   /* padding: 0 0.2rem; */
  42.   border-left: 1px solid;
  44.   /* 水平垂直居中 */
  45.   text-align: center;
  46.   /* align-items: center; */
  47.   line-height: 2rem;
  48. }
  49. /* 搜索文本框 */
  50. .header .search .words {
  51.   flex: auto;
  52.   border: none;
  53.   outline: none;
  54.   font-size: 1.2rem;
  55.   color: #aaaaaa;
  56. }
  • footer.css
  1. .footer {
  2.   display: flex;
  3.   justify-content: space-around;
  4.   padding-top: 0.5rem;
  5. }
  6. .footer > div {
  7.   display: flex;
  8.   flex-flow: column nowrap;
  9.   align-items: center;
  10. }
  12. .footer > div > .iconfont {
  13.   font-size: 2rem;
  14. }
  16. .footer > div > span {
  17.   font-size: 1rem;
  18. }
  • nav.css
  1. .main .nav {
  2.   padding: 1rem;
  3.   display: flex;
  4.   flex-flow: row wrap;
  5.   justify-content: space-between;
  6. }
  8. .main .nav img {
  9.   height: 4rem;
  10.   width: 4rem;
  11. }
  12. .main .nav li {
  13.   flex: 1 1 20%;
  15.   display: flex;
  16.   flex-flow: column nowrap;
  17.   align-items: center;
  18. }
  19. .main a {
  20.   font-size: 1rem;
  21. }
  22. .main .pic-1 {
  23.   width: 100%;
  24.   border-radius: 10rem;
  25.   padding: 0 1rem;
  26. }
  • ms.css
  1. /* 秒杀 */
  2. .main .ms {
  3.   background-color: rgb(230, 227, 224);
  4.   padding: 1rem;
  5.   margin: 1rem 0;
  6.   border-radius: 2rem;
  7. }
  8. .main .ms .ms-top {
  9.   font-size: 1.3rem;
  10.   height: 3rem;
  11.   display: flex;
  12.   justify-content: space-between;
  13. }
  15. .main .ms .ms-top .left {
  16.   display: flex;
  17. }
  18. .main .ms .ms-top .left .notice {
  19.   font-size: 1.1rem;
  20.   height: 2rem;
  21.   border: 1px solid #e43130;
  22.   border-radius: 2rem;
  23.   margin-left: 1rem;
  24.   display: flex;
  25.   justify-content: center;
  26.   align-items: center;
  27. }
  28. .main .ms .ms-top .left .notice .tips {
  29.   background-color: #e43130;
  30.   color: #fff;
  31.   border-radius: 2rem;
  32.   padding: 0.3rem 0.5rem;
  33. }
  34. .main .ms .ms-top .left .notice .time {
  35.   padding: 0.3rem 0.5rem;
  36. }
  37. .main .ms .ms-top .right {
  38.   color: #e43130;
  39. }
  40. /* 主体区 */
  42. .main .ms .ms-body {
  43.   background-color: #fff;
  44.   border-radius: 1rem;
  45.   display: flex;
  46.   justify-content: space-between;
  47.   /* justify-content: center; */
  48. }
  49. .main .ms .ms-body img {
  50.   height: 7rem;
  51.   width: 7rem;
  52. }
  53. .main .ms .ms-body .item div:first-of-type {
  54.   color: #e43130;
  55.   font-weight: bolder;
  56. }
  57. .main .ms .ms-body .item div:last-of-type {
  58.   color: #666;
  59.   text-decoration: line-through;
  60.   text-decoration-color: #666;
  61. }
  • tj.css
  1. .main .title {
  2.   height: 4rem;
  3.   color: #555555;
  4.   font-weight: 550;
  5.   text-align: center;
  6. }
  8. .main .tj {
  9.   font-size: 1rem;
  10.   display: flex;
  11.   flex-wrap: wrap;
  12. }
  14. .main .tj .item {
  15.   flex: 0 1 calc(50% - 2rem);
  16.   background-color: azure;
  18.   overflow: hidden;
  20.   display: flex;
  21.   flex-flow: column nowrap;
  23.   margin-left: 1rem;
  24.   margin-bottom: 1rem;
  25.   padding-bottom: 1rem;
  27.   border-radius: 1rem;
  28. }
  30. .main .tj .item img {
  31.   width: 100%;
  32.   height: 100%;
  33. }
  34. .main .tj .item {
  35.   padding: 1rem;
  36. }
  38. .main .tj .item .price {
  39.   display: flex;
  40.   justify-content: space-between;
  41. }
  42. .main .tj .item .price div:first-of-type {
  43.   color: brown;
  44. }
  45. .main .tj .item .price div:last-of-type {
  46.   color: rgb(78, 70, 70);
  47.   background-color: #f6f6f6;
  48.   border-radius: 1rem;
  49.   padding: 0.2rem 1rem;
  50. }
上一条：学习仿做PHP中文网主页下一条：微信收付通支付回调通知解密数据样例！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多