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

博客列表 >0718京东

0718京东

小言
小言原创
2022年07月19日 21:03:26261浏览

  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.     }
上一条：定位的几种方式下一条：仿php.cn手机端
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多