Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿京东商城首页
Blogger Information
Blog 19
fans 0
comment 0
visits 10180
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿京东商城首页
搬砖来学php
Original
443 people have browsed it

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <link rel="stylesheet" href="css/reset.css" />
  9.     <link rel="stylesheet" href="icon/iconfont.css" />
  10.     <link rel="stylesheet" href="css/headerfooter.css" />
  11.     <!-- <link rel="stylesheet" href="css/miaosha.css"> -->
  12.     <title>Document</title>
  13. </head>
  14. <style>
  15.     body {
  16.         margin: 0;
  17.         padding: 0;
  18.     }
  20.     main div.box {
  21.         background-color: #c82519;
  22.         border: 1px solid #c82519;
  23.         /* position: relative; */
  24.         /* top: 0.001rem;
  25.         left: 0.01px; */
  26.         /* width: 400px; */
  27.         height: 150px;
  28.         display: flex;
  29.         /* 设置弧形 */
  30.         border-bottom-left-radius: 80px;
  31.         border-bottom-right-radius: 80px;
  32.     }
  34.     main div.box {
  35.         /*父级定位*/
  36.         position: static;
  37.         position: relative;
  38.         /* width: 350px;
  39.        left: 0; */
  40.     }
  42.     main div.tupian>img {
  43.         width: calc(100vw / 3.75) border-radius: 0.1rem;
  44.         margin-left: 1rem;
  45.         margin-right: 1rem;
  46.     }
  48.     /* 轮播图 */
  49.     main div.tupian>img {
  50.         /*绝对定位*/
  52.         position: absolute;
  53.         height: 150px;
  55.         top: 10px;
  56.         margin-left: 0.1rem;
  57.         margin-right: 0.1rem;
  58.         padding-right: 0.2rem;
  59.         /* right: 1px;
  60.       left: 13px; */
  61.     }
  63.     /* 导航 */
  64.     main ul.navs li.item a {
  65.         /* margin-top: 0.08rem; */
  66.         display: grid;
  67.         color: #666;
  68.         font-size: 0.07rem;
  69.         place-items: center;
  70.         ;
  74.     }
  76.     body main ul.navs {
  77.         display: grid;
  78.         grid-template-columns: repeat(5, 1fr);
  79.         gap: 0 0.1rem;
  80.         /* gap: 1vw; */
  81.         place-items: center;
  82.         padding: 0.11rem;
  83.         border: 5px;
  86.     }
  88.     main ul.navs li.item>a img {
  89.         width: 50px;
  91.     }
  93.     /* 3. 商品列表 */
  95.     main .list {
  96.         display: grid;
  97.         grid-template-columns: repeat(2, 1fr);
  98.         gap: 0 0.1rem;
  99.         place-items: center;
  100.         margin-right: 0.1rem;
  101.         border-left: 9rem;
  102.         padding-left: 0.13rem;
  103.         font-size: 0.11rem;
  105.     }
  107.     main .list .item img {
  108.         /* border-radius: 上 右 下 左; 顺时针 */
  109.         border-radius: 0.1rem 0.1rem 0 0;
  110.     }
  112.     /* 商品描述 */
  113.     main .list .item .desc {
  114.         padding: 0.1rem;
  115.         font-size: smaller;
  116.     }
  118.     main .list .item .desc>a{
  119.         color: black;
  120.     }
  122.     /* 价格 */
  123.     main .list .item .price .iconfont {
  124.         color: #f50;
  125.         font-size: smaller;
  126.     }
  128.     main .list .item .price span:last-of-type {
  129.         color: #bbb;
  130.         font-size: smaller;
  131.     }
  133. </style>
  135. <body>
  136.     <header>
  137.         <a href="" class="logo"> <img src="images/toubu.png" alt="" /></a>
  138.         <a href="" class="sousuo">
  139.             <span>京东物流一日达</span>
  140.             <!-- <span>搜索</span> -->
  141.         </a>
  142.         <div class="login">
  143.             <a href="">登录</a>
  144.         </div>
  146.     </header>
  148.     <main>
  149.         <div class="box"></div>
  150.         <div class="tupian">
  151.             <img src="images/ad-003.png" alt="这是图片" />
  152.         </div>
  154.         <ul class="navs">
  155.             <li class="item">
  156.                 <a href=""> <img src="images/chaoshi.png" alt="" /></a>
  157.                 <a href="">京东超市</a>
  158.             </li>
  159.             <li class="item">
  160.                 <a href=""> <img src="images/shuma.png" alt="" /></a>
  161.                 <a href="">数码电器</a>
  162.             </li>
  163.             <li class="item">
  164.                 <a href=""> <img src="images/baihuo.png" alt="" /></a>
  165.                 <a href="">京东百货</a>
  166.             </li>
  167.             <li class="item">
  168.                 <a href=""> <img src="images/shengxian.png" alt="" /></a>
  169.                 <a href="">京东生鲜</a>
  170.             </li>
  171.             <li class="item">
  172.                 <a href=""> <img src="images/daojia.png" alt="" /></a>
  173.                 <a href="">京东到家</a>
  174.             </li>
  175.             <li class="item">
  176.                 <a href=""> <img src="images/jiaofei.png" alt="" /></a>
  177.                 <a href="">充值缴费</a>
  178.             </li>
  179.             <li class="item">
  180.                 <a href=""> <img src="images/haodian.png" alt="" /></a>
  181.                 <a href="">附近好店</a>
  182.             </li>
  183.             <li class="item">
  184.                 <a href=""> <img src="images/lingjuan.png" alt="" /></a>
  185.                 <a href="">领卷</a>
  186.             </li>
  187.             <li class="item">
  188.                 <a href=""> <img src="images/jintie.png" alt="" /></a>
  189.                 <a href="">领金贴</a>
  190.             </li>
  191.             <li class="item">
  192.                 <a href=""> <img src="images/huiyuan.png" alt="" /></a>
  193.                 <a href="">plus会员</a>
  194.             </li>
  195.         </ul>
  196.         <ul class="list">
  197.             <li class="item">
  198.                 <a href=""><img src="images/meinv.png" alt="" /></a>
  199.                 <div class="desc">
  200.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  201.                     <div class="price">
  202.                         <span class="iconfont icon-renminbi_o">$169</span>
  203.                         <span>123人已购买</span>
  204.                     </div>
  205.                 </div>
  206.             </li>
  207.             <li class="item">
  208.                 <a href=""><img src="images/meinv.png" alt="" /></a>
  209.                 <div class="desc">
  210.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  211.                     <div class="price">
  212.                         <span class="iconfont icon-renminbi_o">$169</span>
  213.                         <span>123人已购买</span>
  214.                     </div>
  215.                 </div>
  216.             </li>
  217.             <li class="item">
  218.                 <a href=""><img src="images/meinv.png" alt="" /></a>
  219.                 <div class="desc">
  220.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  221.                     <div class="price">
  222.                         <span class="iconfont icon-renminbi_o">$169</span>
  223.                         <span>123人已购买</span>
  224.                     </div>
  225.                 </div>
  226.             </li>
  227.             <li class="item">
  228.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  229.                 <div class="desc">
  230.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  231.                     <div class="price">
  232.                         <span class="iconfont icon-renminbi_o">$169</span>
  233.                         <span>123人已购买</span>
  234.                     </div>
  235.                 </div>
  236.             </li>
  238.             <li class="item">
  239.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  240.                 <div class="desc">
  241.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  242.                     <div class="price">
  243.                         <span class="iconfont icon-renminbi_o">$169</span>
  244.                         <span>123人已购买</span>
  245.                     </div>
  246.                 </div>
  247.             </li>
  248.             <li class="item">
  249.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  250.                 <div class="desc">
  251.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  252.                     <div class="price">
  253.                         <span class="iconfont icon-renminbi_o">$169</span>
  254.                         <span>123人已购买</span>
  255.                     </div>
  256.                 </div>
  257.             </li>
  259.             <li class="item">
  260.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  261.                 <div class="desc">
  262.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  263.                     <div class="price">
  264.                         <span class="iconfont icon-renminbi_o">$169</span>
  265.                         <span>123人已购买</span>
  266.                     </div>
  267.                 </div>
  268.             </li>
  269.             <li class="item">
  270.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  271.                 <div class="desc">
  272.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  273.                     <div class="price">
  274.                         <span class="iconfont icon-renminbi_o">$169</span>
  275.                         <span>123人已购买</span>
  276.                     </div>
  277.                 </div>
  278.             </li>
  280.             <li class="item">
  281.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  282.                 <div class="desc">
  283.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  284.                     <div class="price">
  285.                         <span class="iconfont icon-renminbi_o">$169</span>
  286.                         <span>123人已购买</span>
  287.                     </div>
  288.                 </div>
  289.             </li>
  290.             <li class="item">
  291.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  292.                 <div class="desc">
  293.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  294.                     <div class="price">
  295.                         <span class="iconfont icon-renminbi_o">$169</span>
  296.                         <span>123人已购买</span>
  297.                     </div>
  298.                 </div>
  299.             </li>
  301.             <li class="item">
  302.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  303.                 <div class="desc">
  304.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  305.                     <div class="price">
  306.                         <span class="iconfont icon-renminbi_o">$169</span>
  307.                         <span>123人已购买</span>
  308.                     </div>
  309.                 </div>
  310.             </li>
  311.             <li class="item">
  312.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  313.                 <div class="desc">
  314.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  315.                     <div class="price">
  316.                         <span class="iconfont icon-renminbi_o">$169</span>
  317.                         <span>123人已购买</span>
  318.                     </div>
  319.                 </div>
  320.             </li>
  322.             <li class="item">
  323.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  324.                 <div class="desc">
  325.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  326.                     <div class="price">
  327.                         <span class="iconfont icon-renminbi_o">$169</span>
  328.                         <span>123人已购买</span>
  329.                     </div>
  330.                 </div>
  331.             </li>
  332.             <li class="item">
  333.                 <a href=""><img src="images/meinv1.png" alt="" /></a>
  334.                 <div class="desc">
  335.                     <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
  336.                     <div class="price">
  337.                         <span class="iconfont icon-renminbi_o">$169</span>
  338.                         <span>123人已购买</span>
  339.                     </div>
  340.                 </div>
  341.             </li>
  342.         </ul>
  343.     </main>
  345.     <footer>
  346.         <a href="">
  347.             <span class="iconfont icon-jingdong"></span>
  348.             <span>首页</span>
  349.         </a>
  350.         <a href="">
  351.             <span class="iconfont icon-fenlei"></span>
  352.             <span>分类</span>
  353.         </a>
  354.         <a href="">
  355.             <span class="iconfont icon-xiajiang"></span>
  356.             <span>惊喜</span>
  357.         </a>
  358.         <a href="">
  359.             <span class="iconfont icon-gouwucheman"></span>
  360.             <span>购物车</span>
  361.         </a>
  362.         <a href="">
  363.             <span class="iconfont icon-wode-wode"></span>
  364.             <span>未登录</span>
  365.         </a>
  366.     </footer>
  367. </body>
  369. </html>

页眉和页脚部分css代码

  2. *{
  3.     margin: 0;
  4.     padding: ;
  5.     box-sizing: border-box;
  6. }
  7. header,footer{
  8.     height: 50px;
  9.     background-color: #c82519;
  10.     position: fixed;
  11.     z-index: 100;
  13. }
  14. header{
  15.     top: 0;
  16.     left: 0;
  17.     right: 0;
  18. }
  19. footer{
  20.     bottom: 0;
  21.     left: 0;
  22.     right: 0;
  23. }
  24. main{
  25.     background-color: ;
  26.     min-height: 2000px;
  27.     overflow: hidden;
  28.     position: relative;
  29.     top: 50px;
  30. }
  32. header{
  33.     display: grid;
  34.     grid-template-columns: 0.28rem 1fr 0.38rem;
  35.     grid-auto-rows: 0.3rem;
  36.     place-items: center;
  37.     gap: 0.1rem;
  40. }
  41. header a.logo{
  42.     display: flex;
  43.     padding-left: 0.1rem;
  47. }
  49. header a.sousuo{
  50.     width: 100%;
  51.     height: 30px;
  52.     overflow: hidden;
  53.     background-color: #fff;
  54.     color: #f7f7f7;
  55.     border-radius: 0.15rem;
  56.     /* font-size: 12px; */
  57.     display: flex;
  58.     place-content: space-between;
  59.     place-items: center;
  60.     -webkit-box-align: center;
  61.     line-height: 30px
  62.     position: absolute;
  63.     padding-right: 10px;
  64.     box-sizing: border-box;
  67. }
  68. header a.sousuo span{
  69.     color: lightslategray;
  70.     display: flex;
  71.     margin: 50px;
  72.     font-size: 0.1rem;
  75. }
  77. footer{
  78.     background-color: #fff;
  79.     color: #8b8b8b;
  80.     display: flex;
  81.     flex-wrap: nowrap;
  82.     place-content: center;
  83.     place-content: space-between;
  84.     place-content: space-evenly;
  87. }
  88. footer >a {
  89.     color: #8b8b8b;
  90.     display: grid;
  91.     place-items: center;
  92. } 
  93. footer >a >span{
  94.     font-size:0.08rem;
  95. }
  97. footer >a >span.iconfont{
  98.     color:#8b8b8b;
  99.     font-size: large;
  102. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post