Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0718京东
Blogger Information
Blog 42
fans 0
comment 0
visits 15725
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
0718京东
小言
Original
264 people have browsed it

  1. <body>
  3.     <header>
  4.         <div>
  5.             <a href="" class="fenlei"><span class="iconfont icon-ai-kind"></span></a>
  6.             <div>
  8.             </div>
  9.             <a href="" class="wode"><span class="iconfont icon-wode"></span></a>
  10.         </div>
  11.     </header>
  14.     <main>
  15.         <div class="as">
  16.             <a href=""><img src="images/lunbo.jpg" alt=""></a>
  17.         </div>
  18.         <ul class="navs">
  19.             <li class="item">
  20.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  21.                 <a href="">京东超市</a>
  22.             </li>
  23.             <li class="item">
  24.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  25.                 <a href="">京东超市</a>
  26.             </li>
  27.             <li class="item">
  28.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  29.                 <a href="">京东超市</a>
  30.             </li>
  31.             <li class="item">
  32.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  33.                 <a href="">京东超市</a>
  34.             </li>
  35.             <li class="item">
  36.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  37.                 <a href="">京东超市</a>
  38.             </li>
  39.             <li class="item">
  40.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  41.                 <a href="">京东超市</a>
  42.             </li>
  43.             <li class="item">
  44.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  45.                 <a href="">京东超市</a>
  46.             </li>
  47.             <li class="item">
  48.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  49.                 <a href="">京东超市</a>
  50.             </li>
  51.             <li class="item">
  52.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  53.                 <a href="">京东超市</a>
  54.             </li>
  55.             <li class="item">
  56.                 <a href=""><img src="images/chaoshi.png" alt=""></a>
  57.                 <a href="">京东超市</a>
  58.             </li>
  59.         </ul>
  61.         <div class="miaosha">
  62.             <div class="wenzi">
  63.                 <span>京东秒杀</span>
  64.                 <span>爆款轮番秒<i class="fuhao">&gt;</i></span>
  65.             </div>
  66.             <ul class="shangpin">
  67.                 <li class="zishangpin">
  68.                     <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  69.                     <span class="iconfont icon-renminbi">99</span>
  70.                 </li>
  71.                 <li class="zishangpin">
  72.                     <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  73.                     <span class="iconfont icon-renminbi">99</span>
  74.                 </li>
  75.                 <li class="zishangpin">
  76.                     <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  77.                     <span class="iconfont icon-renminbi">99</span>
  78.                 </li>
  79.                 <li class="zishangpin">
  80.                     <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  81.                     <span class="iconfont icon-renminbi">99</span>
  82.                 </li>
  83.                 <li class="zishangpin">
  84.                     <a href=""><img src="images/shangpin.jpg.dpg" alt=""></a>
  85.                     <span class="iconfont icon-renminbi">99</span>
  86.                 </li>
  87.             </ul>
  88.         </div>
  91.         <ul class="list">
  92.             <li class="items">
  93.                 <a href=""><img src="images/shangpin.webp" alt=""></a>
  94.                 <div class="ziti">
  95.                     <a href="">
  96.                         <div class="title">
  97.                             <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  98.                         </div>
  99.                         <div class="jiage">
  100.                             <span class="iconfont icon-renminbi">29.9</span>
  101.                             <span>19.9元2件</span>
  102.                         </div>
  103.                         <div class="pingjia">
  104.                             <span>自营</span>
  105.                             <span>20万+条评论</span>
  106.                             <span>看相似</span>
  107.                         </div>
  108.                      </a>
  109.                 </div>
  110.             </li>
  111.             <li class="items">
  112.                 <a href=""><img src="images/shangpin.webp" alt=""></a>
  113.                 <div class="ziti">
  114.                     <a href="">
  115.                         <div class="title">
  116.                             <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  117.                         </div>
  118.                         <div class="jiage">
  119.                             <span class="iconfont icon-renminbi">29.9</span>
  120.                             <span>19.9元2件</span>
  121.                         </div>
  122.                         <div class="pingjia">
  123.                             <span>自营</span>
  124.                             <span>20万+条评论</span>
  125.                             <span>看相似</span>
  126.                         </div>
  127.                      </a>
  128.                 </div>
  129.             </li>
  130.             <li class="items">
  131.                 <a href=""><img src="images/shangpin.webp" alt=""></a>
  132.                 <div class="ziti">
  133.                     <a href="">
  134.                         <div class="title">
  135.                             <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  136.                         </div>
  137.                         <div class="jiage">
  138.                             <span class="iconfont icon-renminbi">29.9</span>
  139.                             <span>19.9元2件</span>
  140.                         </div>
  141.                         <div class="pingjia">
  142.                             <span>自营</span>
  143.                             <span>20万+条评论</span>
  144.                             <span>看相似</span>
  145.                         </div>
  146.                      </a>
  147.                 </div>
  148.             </li>
  149.             <li class="items">
  150.                 <a href=""><img src="images/shangpin.webp" alt=""></a>
  151.                 <div class="ziti">
  152.                     <a href="">
  153.                         <div class="title">
  154.                             <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  155.                         </div>
  156.                         <div class="jiage">
  157.                             <span class="iconfont icon-renminbi">29.9</span>
  158.                             <span>19.9元2件</span>
  159.                         </div>
  160.                         <div class="pingjia">
  161.                             <span>自营</span>
  162.                             <span>20万+条评论</span>
  163.                             <span>看相似</span>
  164.                         </div>
  165.                      </a>
  166.                 </div>
  167.             </li>
  168.             <li class="items">
  169.                 <a href=""><img src="images/shangpin.webp" alt=""></a>
  170.                 <div class="ziti">
  171.                     <a href="">
  172.                         <div class="title">
  173.                             <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  174.                         </div>
  175.                         <div class="jiage">
  176.                             <span class="iconfont icon-renminbi">29.9</span>
  177.                             <span>19.9元2件</span>
  178.                         </div>
  179.                         <div class="pingjia">
  180.                             <span>自营</span>
  181.                             <span>20万+条评论</span>
  182.                             <span>看相似</span>
  183.                         </div>
  184.                      </a>
  185.                 </div>
  186.             </li>
  187.             <li class="items">
  188.                 <a href=""><img src="images/shangpin.webp" alt=""></a>
  189.                 <div class="ziti">
  190.                     <a href="">
  191.                         <div class="title">
  192.                             <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  193.                         </div>
  194.                         <div class="jiage">
  195.                             <span class="iconfont icon-renminbi">29.9</span>
  196.                             <span>19.9元2件</span>
  197.                         </div>
  198.                         <div class="pingjia">
  199.                             <span>自营</span>
  200.                             <span>20万+条评论</span>
  201.                             <span>看相似</span>
  202.                         </div>
  203.                      </a>
  204.                 </div>
  205.             </li>
  206.             <li class="items">
  207.                 <a href=""><img src="images/shangpin.webp" alt=""></a>
  208.                 <div class="ziti">
  209.                     <a href="">
  210.                         <div class="title">
  211.                             <span>京东超级</span> 伊利牛奶伊利牛奶伊利牛奶伊利牛奶伊利牛奶
  212.                         </div>
  213.                         <div class="jiage">
  214.                             <span class="iconfont icon-renminbi">29.9</span>
  215.                             <span>19.9元2件</span>
  216.                         </div>
  217.                         <div class="pingjia">
  218.                             <span>自营</span>
  219.                             <span>20万+条评论</span>
  220.                             <span>看相似</span>
  221.                         </div>
  222.                      </a>
  223.                 </div>
  224.             </li>
  225.         </ul>
  226.     </main>
  228.     <footer>
  229.         <a href="" class="iconfont icon-jingdongicon-">
  230.             <span>首页</span>
  231.         </a>
  232.         <a href="" class="iconfont icon-fenlei">
  233.             <span>分类</span>
  234.         </a>
  235.         <a href="" class="iconfont icon-xiajiang">
  236.             <span>京喜</span>
  237.         </a>
  238.         <a href="" class="iconfont icon-gouwucheman">
  239.             <span>购物车</span>
  240.         </a>
  241.         <a href="" class="iconfont icon-wodexiao">
  242.             <span>我的</span>
  243.         </a>
  244.     </footer>
  245. </body>

css

  1.     /* 页眉 */
  2.     header,footer{
  3.         position: fixed;
  4.         z-index: 100;
  5.     }
  6.     header{
  7.     top: 0;
  8.     left: 0;
  9.     right: 0;
  10.     }
  11.     footer{
  12.         bottom: 0;
  13.         left: 0;
  14.         right: 0;
  15.     }
  17.     header > div:first-of-type{
  18.         height: 0.6rem;
  19.         background-image:linear-gradient(0deg,#f1503b,#c82519 50%);
  20.         display: grid;
  21.         grid-template-columns: 0.4rem 1fr 0.4rem;
  22.         place-items: center;
  24.     }
  25.     header .icon-ai-kind,
  26.     header .icon-wode{
  27.         color: #fff;
  28.         font-size:0.3rem;
  29.     }
  31. /* 主体 */
  32.     main{
  33.         height: 1500px;
  34.         overflow: hidden;
  35.             /* 再做一个相对定位，将整体向下偏移50 */
  36.             position:relative;
  37.             top: 50px;
  38.             /* 防止商品被挡住 */
  39.             padding-bottom: 0.6rem;
  40.     }
  41.     /* 轮播 */
  42.     main > div:first-of-type{
  43.         background-color:red;
  44.         position:relative;
  45.         text-align: center;
  46.         background-image:linear-gradient(0deg,#f1503b,#c82519 50%);
  47.         border-bottom-left-radius: 100%;
  48.         border-bottom-right-radius: 100%;
  49.     }
  50.     main .as img{
  51.         max-width: 95%;       
  52.     }
  53.     /*  */
  54.     main .navs,
  55.     main .miaosha,
  56.     main .list{
  57.         border-radius: 0.1rem;
  58.         margin: 0.08rem 0.08rem 0 0.08rem;
  59.     }
  60.     /* 导航 */
  61.     main .navs{
  62.         background-color: #f6f6f6;
  63.         display: grid;
  64.         grid-template-columns: repeat(5 ,1fr);
  65.         gap: 0.1rem;
  67.     }
  68.     main .navs .item{
  69.         display: grid;
  70.         place-items: center;
  71.     }
  72.     /* 秒杀 */
  73.     main .miaosha{
  74.         background-color: #fff;
  75.         border-radius: 30px;
  76.         display: grid;
  77.         grid-template-rows: 0.5rem 1fr;
  79.     }
  80.     main .miaosha .wenzi{
  81.         display: grid;
  82.         grid-template-columns: repeat(2 ,1fr);
  83.         padding-top: 0.1rem;
  85.     }
  86.     main .miaosha .wenzi >span:first-of-type{
  87.         margin-left: 0.2rem;
  88.         font-size: 0.2rem;
  89.     }
  90.     main .miaosha .wenzi >span:last-of-type{
  91.         display: grid;
  92.         grid-template-columns:repeat(2 ,1fr);
  93.         color: red;
  94.         margin-left: 0.4rem;
  95.     }
  96.     main .miaosha .wenzi .fuhao{
  97.        text-align: center;
  98.         background-color: red;
  99.         height: 20px;
  100.         width: 20px;
  101.         color: #fff;
  102.         border-radius: 20px;
  103.     }
  106.     main .miaosha .shangpin{
  107.         display: grid;
  108.         grid-template-columns: repeat(5 ,1fr);
  109.         gap: 0.1rem;
  110.         margin-bottom: 0.1rem;
  111.     }
  112.     main .miaosha .shangpin .zishangpin{
  113.         display: grid;
  114.         place-items: center;
  115.     }
  116.     main .miaosha .shangpin .zishangpin .icon-renminbi{
  117.         color: red;
  118.     }
  120.     /* 商品 */
  121.     main .list{
  122.         display: grid;
  123.         grid-template-columns: repeat(2 ,1fr);
  124.         gap: 0.1rem;
  126.     }
  127.     main .list .items{
  128.         display: grid;
  129.         gap: 0.05rem;
  130.         background-color: #fff;
  131.     }
  132.     main .list .items .ziti .title span{
  133.         background-color: red;
  134.         border-radius: 0.04rem;
  135.     }
  136.     main .list .items .ziti .jiage .icon-renminbi{
  137.         color: red;
  138.     }
  139.     main .list .items .ziti .jiage > span:last-of-type{
  140.         border: 1px solid red;
  141.         border-radius: 0.04rem;
  142.     }
  143.     main .list .items .ziti .pingjia{
  144.         display: grid;
  145.         grid-template-columns: 0.4rem 1fr 0.4rem;
  147.     }
  148.     main .list .items .ziti .pingjia > span:first-of-type{
  149.         background-color: red;
  150.         color: #fff;
  151.         text-align: center;
  152.         border-radius: 5px;
  153.     }
  154.     main .list .items .ziti .pingjia > span:nth-of-type(2){
  155.         color: #ccc;
  156.     }
  157.     main .list .items .ziti .pingjia > span:last-of-type{
  158.         background-color: #f2f2f2;
  159.         border-radius: 5px;
  160.     }
  162.     /*  页脚*/
  163.     footer{
  164.         height: 0.5rem;
  165.         display: grid;
  166.         grid-template-columns:repeat(5 ,1fr);
  167.         background-color:#fff;
  168.         place-content: space-around;
  169.          place-items: center;
  170.         font-size: smaller;
  171.     }
  172.     footer >a{
  173.         display: grid;
  174.         place-items: center;
  175.     }
  176.     footer >a:first-of-type{
  177.         color: red;
  178.         font-size: 0.18rem;
  179.     }
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