search

博客列表 >仿京东商城首页

仿京东商城首页

搬砖来学php
搬砖来学php原创
2022年07月20日 02:06:17439浏览

  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. }
上一条：仿写淘宝移动端首页下一条：JavaScript的变量和函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多