简体中文（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

博客列表 >仿写京东商城

仿写京东商城

手机用户1615433136
手机用户1615433136原创
2021年03月27日 21:05:19721浏览

京东商城

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东商城/title>
<!-- 字体图标 -->
<link rel="stylesheet" href="static/icon-font/iconfont.css" />
<!-- 首页 -->
<link rel="stylesheet" href="static/css/index.css" />
<!-- 页眉区 -->
<link rel="stylesheet" href="static/css/header.css" />
<!-- 导航区 -->
<link rel="stylesheet" href="static/css/nav.css" />
<!-- 秒杀 -->
<link rel="stylesheet" href="static/css/ms.css" />
<!-- 推荐:猜你喜欢 -->
<link rel="stylesheet" href="static/css/tj.css" />
<!-- 页脚 -->
<link rel="stylesheet" href="static/css/footer.css" />
</head>

  2.   <body>
  3.     <!-- 页眉 -->
  4.     <div class="header">
  5.       <!-- 字体图标菜单 -->
  6.       <div class="menu iconfont icon-menu"></div>
  7.       <!-- 搜索框 -->
  8.       <div class="search">
  9.         <div class="logo">JD</div>
  10.         <div class="zoom iconfont icon-search"></div>
  11.         <input class="words" type="text" value="牛奶" />
  12.       </div>
  13.       <!-- 登录按钮 -->
  14.       <a href="" class="login">登录</a>
  15.     </div>

主体

<div class="main">

主导航区

<ul class="nav">

第一组

  1. <li>
  2.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  3.           <a href="">京东超市</a>
  4.         </li>
  5.         <li>
  6.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  7.           <a href="">数码电器</a>
  8.         </li>
  9.         <li>
  10.           <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  11.           <a href="">京东服饰</a>
  12.         </li>
  13.         <li>
  14.           <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  15.           <a href="">京东生鲜</a>
  16.         </li>
  17.         <li>
  18.           <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  19.           <a href="">京东到家</a>
  20.         </li>

第二组

  1.  <li>
  2.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  3.           <a href="">充值缴费</a>
  4.         </li>
  5.         <li>
  6.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  7.           <a href="">9.9元拼</a>
  8.         </li>
  9.         <li>
  10.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  11.           <a href="">领券</a>
  12.         </li>
  13.         <li>
  14.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  15.           <a href="">领金贴</a>
  16.         </li>
  17.         <li>
  18.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  19.           <a href="">PLUS会员</a>
  20.         </li>
  21.       </ul>

秒杀区

  • 头部
    1. <div class="ms-top">
    2.         <div class="left">
    3.           <div class="title">京东秒杀</div>
    4.           <div class="notice">
    5.             <div class="tips">18点专场</div>
    6.             <div class="time">02:20:30</div>
    7.           </div>
    8.         </div>
    9.         <div class="right">更多秒杀</div>
    10.       </div>

秒杀主体区

  1.  <ul class="ms-body">
  2.           <li class="item">
  3.             <a href=""><img src="images/ms/ms-1.jpg" alt="" /></a>
  4.             <div class="iconfont icon-rmb">338</div>
  5.             <div class="iconfont icon-rmb">558</div>
  6.           </li>
  7.           <li class="item">
  8.             <a href=""><img src="images/ms/ms-2.jpg" alt="" /></a>
  9.             <div class="iconfont icon-rmb">3456</div>
  10.             <div class="iconfont icon-rmb">4567</div>
  11.           </li>
  12.           <li class="item">
  13.             <a href=""><img src="mages/ms/ms-3.jpg" alt="" /></a>
  14.             <div class="iconfont icon-rmb">789</div>
  15.             <div class="iconfont icon-rmb">999</div>
  16.           </li>
  17.           <li class="item">
  18.             <a href=""><img src="images/ms/ms-4.jpg" alt="" /></a>
  19.             <div class="iconfont icon-rmb">3213</div>
  20.             <div class="iconfont icon-rmb">4532</div>
  21.           </li>
  22.         </ul>
  23.       </div>
  25.       <!-- 推荐区 -->
  26.       <h2 class="title">猜你喜欢</h2>
  27.       <ul class="tj">
  28.         <li class="item">
  29.           <a href=""><img src="images/sp/sp-1.webp" alt="" /></a>
  30.           <p>商品详情商品介绍商品规格</p>
  31.           <div class="price">
  32.             <div class="iconfont icon-rmb">203</div>
  33.             <div>看相似</div>
  34.           </div>
  35.         </li>
  36.         <li class="item">
  37.           <a href=""><img src="images/sp/sp-2.webp" alt="" /></a>
  38.           <p>商品详情商品介绍商品规格</p>
  39.           <div class="price">
  40.             <div class="iconfont icon-rmb">203</div>
  41.             <div>看相似</div>
  42.           </div>
  43.         </li>
  44.         <li class="item">
  45.           <a href=""><img src="images/sp/sp-3.webp" alt="" /></a>
  46.           <p>商品详情商品介绍商品规格</p>
  47.           <div class="price">
  48.             <div class="iconfont icon-rmb">203</div>
  49.             <div>看相似</div>
  50.           </div>
  51.         </li>
  52.         <li class="item">
  53.           <a href=""><img src="images/sp/sp-4.webp" alt="" /></a>
  54.           <p>商品详情商品介绍商品规格</p>
  55.           <div class="price">
  56.             <div class="iconfont icon-rmb">203</div>
  57.             <div>看相似</div>
  58.           </div>
  59.         </li>
  60.         <li class="item">
  61.           <a href=""><img src="images/sp/sp-5.webp" alt="" /></a>
  62.           <p>商品详情商品介绍商品规格</p>
  63.           <div class="price">
  64.             <div class="iconfont icon-rmb">203</div>
  65.             <div>看相似</div>
  66.           </div>
  67.         </li>
  68.         <li class="item">
  69.           <a href=""><img src="mages/sp/sp-6.webp" alt="" /></a>
  70.           <p>商品详情商品介绍商品规格</p>
  71.           <div class="price">
  72.             <div class="iconfont icon-rmb">203</div>
  73.             <div>看相似</div>
  74.           </div>
  75.         </li>
  76.       </ul>
  77.     </div>
  78.     <!-- 页脚 -->
  79.     <div class="footer">
  80.       <div>
  81.         <div class="iconfont icon-home"></div>
  82.         <span>主页</span>
  83.       </div>
  84.       <div>
  85.         <div class="iconfont icon-layers"></div>
  86.         <span>分类</span>
  87.       </div>
  88.       <div>
  89.         <div class="iconfont icon-kehuguanli"></div>
  90.         <span>京喜</span>
  91.       </div>
  92.       <div>
  93.         <div class="iconfont icon-shopping-cart"></div>
  94.         <span>购物车</span>
  95.       </div>
  96.       <div>
  97.         <div class="iconfont icon-user"></div>
  98.         <span>未登录</span>
  99.       </div>
  100.     </div>
  101.   </body>
  102. </html>
  1. .footer {
  2.   display: flex;
  3.   justify-content: space-around;
  4.   align-items: center;
  5. }
  6. .footer > div {
  7.   display: flex;
  8.   flex-flow: column nowrap;
  9.   align-items: center;
  10. }
  11. .footer > div > .iconfont {
  12.   font-size: 2rem;
  13. }
  14. .footer > div > span {
  15.   font-size: 1rem;
  16. }

header.css

  1. .header {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5. .header .login {
  6.   color: #fff;
  7.   text-align: center;
  8.   flex: 1;
  9. }
  10. .header .menu {
  11.   text-align: center;
  12.   flex: 1;
  13.   font-size: 2.5rem;
  14. }
  15. .header .search {
  16.   flex: 6;
  17.   padding: 0.5rem;
  18.   background-color: #fff;
  19.   border-radius: 3rem;
  20.   display: flex;
  21. }
  22. .header .search .logo {
  23.   color: #e43130;
  24.   flex: 0 1 4rem;
  25.   font-size: 2rem;
  26.   /* \水平垂直居中 */
  27.   text-align: center;
  28.   line-height: 2rem;
  29. }
  30. /* 放大镜 */
  31. .header .search .zoom {
  32.   color: #ccc;
  33.   flex: 0 1 4rem;
  34.   border-left: 1px solid;
  35.   /* 水平垂直居中 */
  36.   text-align: center;
  37.   line-height: 2rem;
  38. }
  39. /* 搜索文本框 */
  40. .header .search .words {
  41.   flex: auto;
  42.   border: none;
  43.   outline: none;
  44.   color: #aaa;
  45. }

index.css

  1. /* 导入公共初始化样式表 */
  2. @import 'reset.css';
  4. /* 页眉 */
  5. .header {
  6.     background-color: #e43130;
  7.     color:white;
  8.     height: 4.4rem;
  10.     /* 固定定位 */
  11.     position: fixed;
  12.     top:0;
  13.     left:0;
  14.     right: 0;
  15.     z-index: 100;
  17.     font-size: 1.4rem;
  18. }
  20. /* 页脚*/
  21. .footer {
  22.     color: #666;
  23.     background-color: #fafafa;
  24.     box-shadow: 0 0 3px #999;
  25.     height: 4.4rem;
  28.     /* 固定定位 */
  29.     position: fixed;
  30.     bottom:0;
  31.     left:0;
  32.     right: 0;
  33.     z-index: 100;
  36.     font-size:1.4rem;
  37. }
  39. /* 主体 */
  40. .main {
  41.      /* 绝对定位 */
  42.     position: absolute;
  43.     top: 4.4rem;
  44.     bottom:4.4rem;
  45.     left:0;
  46.     right: 0;
  48.     font-size:1.4rem;
  50. }

ms.css

  1. /* 秒杀 */
  2. .main .ms {
  3.     background-color: #fff;
  4.     padding: 1rem;
  5.     margin: 1rem 0;
  6. }
  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. }
  19. .main .ms .ms-top .left .notice {
  20.     font-size: 1.1rem;
  21.     height: 2rem;
  22.     border: 1px solid #e43130;
  23.     border-radius: 2rem;
  24.     margin-left: 1rem;
  25.     display: flex;
  26.     justify-content: center;
  27.     align-items: center;
  28. }
  30. .main .ms .ms-top .left .notice .tips {
  31.     background-color: #e43130;
  32.     color: #fff;
  33.     border-radius: 2rem;
  34.     padding: 0.3rem 0.5rem;
  35. }
  37. .main .ms .ms-top .left .notice .time {
  38.     padding: 0.3rem 0.5rem;
  39. }
  41. .main .ms .ms-top .right {
  42.     color: #e43130;
  43. }
  45. /* 主体区 */
  47. .main .ms .ms-body {
  48.     display: flex;
  49.     justify-content: space-between;
  50. }
  51. .main .ms .ms-body img {
  52.     height: 12rem;
  53.     width: 12rem;
  54. }
  56. /* 秒杀价 */
  57. .main .ms .ms-body .item div:first-of-type {
  58.     color: #e43130;
  59.     font-weight: bolder;
  60. }
  63. /* 原价 */
  64. .main .ms .ms-body .item div:last-of-type {
  65.     color: #666666;
  66.    text-decoration: line-through;
  67.    text-decoration-color: #666666;
  68. }

nav.css

  1. /* 主导航区 */
  3. .main .nav {
  4.   /* background-color: #fff; */
  5.   padding: 1rem;
  7.   display: flex;
  8.   /* 允许换行 */
  9.   flex-flow: row wrap;
  10.   justify-content: space-between;
  11. }
  13. .main .nav img {
  14.   height: 4rem;
  15.   width: 4rem;
  16. }
  18. .main .nav li {
  19.   /* 每一行显示5个,100%来分配,应该是20% */
  20.   flex: 1 1 20%;
  22.   display: flex;
  23.   flex-flow: column nowrap;
  24.   align-items: center;
  25. }

reset.css

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

tj.css

  1. .main .title {
  2.   height: 4rem;
  3.   color: #555;
  4.   font-weight: 500;
  5.   text-align: center;
  6. }
  8. .main .tj {
  9.   font-size: 1rem;
  10.   display: flex;
  11.   /* 允许换行 */
  12.   flex-wrap: wrap;
  13. }
  15. .main .tj .item {
  16.   flex: 1 1 calc(50% - 2rem);
  17.   background-color: #fff;
  19.   overflow: hidden;
  21.   display: flex;
  22.   flex-flow: column nowrap;
  24.   margin-left: 1rem;
  25.   margin-bottom: 1rem;
  26.   padding-bottom: 1rem;
  28.   border-radius: 1rem;
  29. }
  31. .main .tj .item img {
  32.   width: 100%;
  33.   height: 100%;
  34. }
  35. .main .tj .item {
  36.   padding: 1rem;
  37. }
  39. .main .tj .item .price {
  40.   display: flex;
  41.   justify-content: space-between;
  42. }
  43. .main .tj .item .price div:first-of-type {
  44.   color: red;
  45. }
  46. .main .tj .item .price div:last-of-type {
  47.   color: #666;
  48.   background-color: #f6f6f6;
  49.   border-radius: 1rem;
  50.   padding: 0.2rem 1rem;
  51. }
上一条：HTML制作表单与表格的实例演示下一条：210325 CSS flex布局 项目属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议