简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿京东首页

仿京东首页

手机用户1576673622
手机用户1576673622原创
2021年01月23日 18:03:58669浏览

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>京东首页</title>
  8.     <!-- 字体图标 -->
  9.     <link rel="stylesheet" href="static/icon-font/iconfont.css">
  10.     <!-- 首页 -->
  11.     <link rel="stylesheet" href="static/csszy/index.css">
  12.     <!-- 页眉 -->
  13.     <link rel="stylesheet" href="static/csszy/header.css">
  14.     <!-- 主导航区 -->
  15.     <link rel="stylesheet" href="static/csszy/nav.css">
  16.     <!-- 秒杀 -->
  17.     <link rel="stylesheet" href="static/csszy/ms.css">
  18.     <!-- 猜你喜欢 -->
  19.     <link rel="stylesheet" href="static/csszy/tj.css">
  20.     <!-- 页脚 -->
  21.     <link rel="stylesheet" href="static/csszy/footer.css">
  22. </head>
  23. <body>
  24.     <!-- 页眉 -->
  25.     <div class="header">
  26.         <!-- 菜单图标 -->
  27.         <div class="menu iconfont icon-menu"></div>
  28.         <!-- 搜素框 -->
  29.         <div class="search">
  30.             <div class="logo">JD</div>
  31.             <div class="zoom iconfont icon-search"></div>
  32.             <input class="words" type="text" value="鼠标键盘" >
  33.         </div>
  34.         <!-- 登录按钮 -->
  35.         <a href="" class="login">登录</a>
  36.     </div>
  38.     <!-- 主体 -->
  39.     <div class="main">
  40.         <!-- 主导航区 -->
  41.         <ul class="nav">
  42.             <!-- 第一组 -->
  43.             <li>
  44.                 <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  45.                 <a href="">京东超市</a>
  46.             </li>
  47.             <li>
  48.                 <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  49.                 <a href="">数码电器</a>
  50.             </li>
  51.             <li>
  52.                 <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  53.                 <a href="">京东服饰</a>
  54.             </li>
  55.             <li>
  56.                 <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  57.                 <a href="">京东生鲜</a>
  58.             </li>
  59.             <li>
  60.                 <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  61.                 <a href="">京东到家</a>
  62.             </li>
  63.             <!-- 第二组 -->
  64.             <li>
  65.                 <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  66.                 <a href="">充值缴费</a>
  67.             </li>
  68.             <li>
  69.                 <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  70.                 <a href="">9.9元拼</a>
  71.             </li>
  72.             <li>
  73.                 <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  74.                 <a href="">领券</a>
  75.             </li>
  76.             <li>
  77.                 <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  78.                 <a href="">领金贴</a>
  79.             </li>
  80.             <li>
  81.                 <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  82.                 <a href="">PLUS会员</a>
  83.             </li>
  84.         </ul>
  86.         <!-- 秒杀区 -->
  87.         <div class="ms">
  88.             <!-- 头部 -->
  89.             <div class="ms-top">
  90.                 <div class="left">
  91.                     <div class="title">京东秒杀</div>
  92.                     <div class="notice">
  93.                         <div class="tips">16点专场</div>
  94.                         <div class="time">0:43:31</div>
  95.                     </div>
  96.                 </div>
  97.                 <div class="right">更多秒杀></div>
  98.             </div>
  100.             <!-- 秒杀区主体 -->
  101.             <ul class="ms-body">
  102.                 <li>
  103.                     <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  104.                     <div class="iconfont icon-rmb">455</div>
  105.                     <div class="iconfont icon-rmb">555</div>
  106.                 </li>
  107.                 <li>
  108.                     <a href=""><img src="static/images/ms/ms-2.jpg" alt=""></a>
  109.                     <div class="iconfont icon-rmb">236</div>
  110.                     <div class="iconfont icon-rmb">322</div>
  111.                 </li>
  112.                 <li>
  113.                     <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  114.                     <div class="iconfont icon-rmb">344</div>
  115.                     <div class="iconfont icon-rmb">555</div>
  116.                 </li>
  117.                 <li>
  118.                     <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  119.                     <div class="iconfont icon-rmb">234</div>
  120.                     <div class="iconfont icon-rmb">642</div>
  121.                 </li>
  122.             </ul>
  123.         </div>
  125.         <!-- 推荐区 -->
  126.         <h2 class="title">猜你喜欢</h2>
  127.         <ul class="tj">
  128.             <li class="item">
  129.                 <a href=""><img src="static/images/sp/sp-1.webp" alt=""></a>
  130.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  131.                 <div class="price">
  132.                     <div class="iconfont icon-rmb">203</div>
  133.                     <div>看相似</div>
  134.                 </div>
  135.             </li>
  136.             <li class="item">
  137.                 <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  138.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  139.                 <div class="price">
  140.                     <div class="iconfont icon-rmb">203</div>
  141.                     <div>看相似</div>
  142.                 </div>
  143.             </li>
  144.             <li class="item">
  145.                 <a href=""><img src="static/images/sp/sp-3.webp" alt=""></a>
  146.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  147.                 <div class="price">
  148.                     <div class="iconfont icon-rmb">203</div>
  149.                     <div>看相似</div>
  150.                 </div>
  151.             </li>
  152.             <li class="item">
  153.                 <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  154.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  155.                 <div class="price">
  156.                     <div class="iconfont icon-rmb">203</div>
  157.                     <div>看相似</div>
  158.                 </div>
  159.             </li>
  160.             <li class="item">
  161.                 <a href=""><img src="static/images/sp/sp-5.webp" alt=""></a>
  162.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  163.                 <div class="price">
  164.                     <div class="iconfont icon-rmb">203</div>
  165.                     <div>看相似</div>
  166.                 </div>
  167.             </li>
  168.             <li class="item">
  169.                 <a href=""><img src="static/images/sp/sp-6.webp" alt=""></a>
  170.                 <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介品介绍商品介绍</p>
  171.                 <div class="price">
  172.                     <div class="iconfont icon-rmb">203</div>
  173.                     <div>看相似</div>
  174.                 </div>
  175.             </li>
  176.         </ul>
  177.     </div>
  179.     <!-- 页脚 -->
  180.     <div class="footer">
  181.             <div>
  182.                 <div class="iconfont icon-home"></div>
  183.                 <span>主页</span>
  184.             </div>
  185.             <div>
  186.                 <div class="iconfont icon-layers"></div>
  187.                 <span>分类</span>
  188.             </div>
  189.             <div>
  190.                 <div class="iconfont icon-kehuguanli"></div>
  191.                 <span>京喜</span>
  192.             </div>
  193.             <div>
  194.                 <div class="iconfont icon-shopping-cart"></div>
  195.                 <span>购物车</span>
  196.             </div>
  197.             <div>
  198.                 <div class="iconfont icon-user"></div>
  199.                 <span>未登录</span>
  200.             </div>
  201.         </div>
  203. </body>
  204. </html>

reset

  1. /* 调整  初始化 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. li {
  10.     /* 去除列表前的小黑点 */
  11.     list-style: none;
  12. }
  14. a {
  15.     /* 去除线条 */
  16.     color: #7b7b7b;
  17.     text-decoration: none;
  18. }
  20. body {
  21.     background-color: #f6f6f6;
  22. }
  24. html {
  25.     font-size: 10px;
  26. }
  28. /* 媒体查询 */
  29. @media screen and (min-width: 480px) {
  30.     html {
  31.         font-size: 12px;
  32.     }
  33. }
  35. @media screen and (min-width: 640px) {
  36.     html {
  37.         font-size: 14px;
  38.     }
  39. }
  41. @media screen and (min-width: 720px) {
  42.     html {
  43.         font-size: 16px;
  44.     }
  45. }

index

  1. /* 索引 目录 */
  2. @import 'reset.css';
  4. /* 页眉 */
  5. .header {
  6.     background-color: #e43130;
  7.     color: #fff;
  8.     height:4.4rem;
  10.     /* 固定定位 */
  11.     position: fixed;
  12.     top: 0;
  13.     right: 0;
  14.     left: 0;
  15.     z-index: 100;
  17.     font-size: 1.4rem;
  18. }
  20. /* 页脚 */
  21. .footer {
  22.     background-color: #fafafa;
  23.     color: #666;
  24.     box-shadow: 0 0 3px #999;
  25.     height:4.4rem;
  27.     /* 固定定位 */
  28.     position: fixed;
  29.     bottom: 0;
  30.     right: 0;
  31.     left: 0;
  32.     z-index: 100;
  33. }
  35. /* 主体 */
  36. .main {
  37.     /* 绝对定位 */
  38.     position: absolute;
  39.     bottom: 4.4rem;
  40.     top: 4.4rem;
  41.     right: 0;
  42.     left: 0;
  44.     font-size: 1.4rem;
  45. }

header

  1. /* 页眉样式 */
  3. .header {
  4.     display: flex;
  5.     align-items: center
  6. }
  8. /* 页眉比列 1；6；1 */
  9. /* 登录按钮 */
  10. .header .login {
  11.     color: #fff;
  12.     text-align: center;
  13.     flex: 1;
  14. }
  15. /* 菜单图标 */
  16. .header .menu {
  17.     text-align: center;
  18.     flex: 1;
  19.     font-size: 2.5rem;
  20. }
  21. /* 搜索框 */
  22. .header .search {
  23.     flex: 6;
  24.     padding: 0.5rem;
  25.     background-color: #fff;
  26.     border-radius: 3rem;
  28.     display: flex;
  29. }
  31. /* jd图标 */
  32. .header .search .logo {
  33.     color: #e43130;
  34.     flex: 0 1 3rem;
  35.     font-size: 2rem;
  36.     /* 水平垂直居中 */
  37.     text-align: center;
  38.     line-height: 2rem;
  39. }
  41. /* 放大镜 */
  42. .header .search .zoom {
  43.     color: #ccc;
  44.     flex: 0 1 4rem;
  46.     border-left: 1px solid;
  47.     /* 水平垂直居中 */
  48.     text-align: center;
  49.     line-height: 2rem
  50. }
  52. /* 搜索框 */
  53. .header .search .words {
  54.     flex: auto;
  55.     border: none;
  56.     outline: none;
  57.     color: #aaa;
  58. }

nav

  1. /* 主导航区 */
  3. .main .nav {
  4.     display: flex;
  5.     flex-flow: row wrap;
  6.     justify-content: space-around;
  7. }
  9. .main .nav img {
  10.     width: 4rem;
  11.     height: 4rem;
  12. }
  14. .main .nav li {
  15.     /* 每一块占据20% */
  16.     flex: 1 1 20%;
  18.     display: flex;
  19.     flex-flow: column wrap;
  20.     align-items: center;
  21. }

秒杀

  1. /* 秒杀css */
  3. .main .ms {
  4.     background-color: #fff;
  5.     padding: 1rem;
  6.     margin: 1rem 0;
  7. }
  9. .main .ms .ms-top {
  10.     font-size: 1.3rem;
  11.     height: 3rem;
  12.     display: flex;
  13.     justify-content: space-between;
  14. }
  16. .main .ms .ms-top .left {
  17.     display: flex;
  18. }
  20. .main .ms .ms-top .left .notice {
  21.     font-size: 1.1rem;
  22.     height: 2rem;
  23.     border: 1px solid #e43130;
  24.     border-radius: 2rem;
  25.     margin-left: 1rem;
  26.     display: flex;
  27.     justify-content: center;
  28.     align-items: center;
  29. }
  31. .main .ms .ms-top .left .notice .tips {
  32.     background-color: #e43130;
  33.     color: #fff;
  34.     border-radius: 2rem;
  35.     padding: 0.3rem 0.5rem;
  36. }
  38. .main .ms .ms-top .left .notice .time {
  39.     padding: 0.3rem 0.5rem;
  40. }
  42. .main .ms .ms-top .right {
  43.     color: #e43130;
  44. }
  46. /* 主体区 */
  47. .main .ms .ms-body {
  48.     display: flex;
  49.     justify-content: space-between
  50. }
  52. .main .ms .ms-body img {
  53.     height: 12rem;
  54.     width: 12rem;
  55. }
  57. /* 秒杀价 */
  58. .main .ms .ms-body li div:first-of-type {
  59.     color: #e43130;
  60.     font-weight: bolder;
  61. }
  62. /* 原价 */
  63. .main .ms .ms-body li div:last-of-type {
  64.     color: #666666;
  65.     text-decoration: line-through;
  66.     text-decoration-color: #666666;
  67. }

推荐

  1. .main .title {
  2.     height: 4rem;
  3.     color: #555;
  4.     text-align: center;
  5. }
  7. .main .tj {
  8.     font-size: 1rem;
  9.     display: flex;
  10.     /* 换行 */
  11.     flex-wrap: wrap;
  12. }
  14. .main .tj .item {
  15.     flex: 1 1 calc(50% - 2rem);
  16.     background-color: #fff;
  18.     overflow: hidden;
  19.     display: flex;
  20.     flex-flow: column nowrap;
  22.     margin-left: 1rem;
  23.     margin-bottom: 1rem;
  24.     padding-bottom: 1rem;
  25.     border-radius: 1rem;
  27. }
  29. .main .tj .item img {
  30.     width: 100%;
  31.     height: 100%;
  32. }
  34. .main .tj .item {
  35.     padding: 1rem;
  36. }
  38. .main .tj .item .price {
  39.     display: flex;
  40.     justify-content: space-between;
  41. }
  43. .main .tj .item .price div:first-of-type {
  44.     color: red;
  45. }
  47. .main .tj .item .price div:last-of-type {
  48.     color: #666;
  49.     background-color: #f6f6f6;
  50.     border-radius: 1rem;
  51.     padding: 0.2rem 1rem;
  52. }
  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 > div > .iconfont {
  14.     font-size: 2rem;
  15. }
  17. .footer > div > span {
  18.     font-size: 1rem;
  19. }
上一条：JS数组常用方法 & json知识 & ajax请求下一条：选择器提权，以及盒模型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多