Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 10.28作业
Blogger Information
Blog 28
fans 0
comment 0
visits 11580
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
10.28作业
子墨吖ฅฅ
Original
344 people have browsed it

淘宝首页商品布局

index.css布局内容

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  6. body {
  7.   width: 100%;
  8.   height: 100%;
  9.   background-color: #eee;
  10. }
  12. .container {
  13.   width: 1200px;
  14.   height: 450px;
  15.   background-color: #fff;
  16.   margin: 0 auto;
  17.   box-sizing: border-box;
  18.   padding: 20px;
  19. }
  21. .container .title {
  22.   display: flex;
  23. }
  25. .container .title .title_span {
  26.   color: #111;
  27.   font-weight: bold;
  28.   font-size: 24px;
  29. }
  31. .container .title .title_img {
  32.   width: 64px;
  33.   height: 18px;
  34.   margin: 10px 0 0 6px;
  35. }
  37. .container .product_info {
  38.   display: grid;
  39.   grid-template-columns: 1fr 1fr 1fr;
  40.   margin-top: 15px;
  41. }
  43. .container .product_info .item {
  44.   width: 378px;
  45.   height: 178px;
  46.   background-color: #eee;
  47.   border-radius: 8px;
  48.   box-sizing: border-box;
  49.   padding: 10px;
  50.   display: flex;
  51. }
  53. .container .product_info .item:hover {
  54.   border: 1px solid #ff5000;
  55. }
  57. .container .product_info .item img {
  58.   width: 150px;
  59.   height: 150px;
  60.   border-radius: 8px;
  61. }
  63. .container .product_info .item .product_title {
  64.   padding-left: 10px;
  65.   display: flex;
  66.   flex-direction: column;
  67.   place-content: space-between;
  68. }
  70. .container .product_info .item .product_title .product_sub div:first-of-type {
  71.   margin-bottom: 10px;
  72. }
  74. .container .product_info .item .product_title .tag_item {
  75.   border: 1px solid #f40;
  76.   color: #ff5000;
  77.   border-color: #fab596;
  78.   background: #ffffff;
  79.   font-size: 12px;
  80.   padding: 3px 5px;
  81.   border-radius: 5px;
  82. }
  84. .container .product_info .item .product_title .product_price {
  85.   color: #ff5000;
  86.   font-size: 22px;
  87. }
  89. .container .product_info .item .product_title .product_price span {
  90.   font-size: 14px;
  91. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta
  6.       name="viewport"
  7.       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  8.     />
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  10.     <title>Document</title>
  11.     <link rel="stylesheet" href="./css/index.css" />
  12.   </head>
  13.   <body>
  14.     <div class="container">
  15.       <div class="title">
  16.         <span class="title_span">猜你喜欢</span>
  17.         <img
  18.           class="title_img"
  19.           src="https://gw.alicdn.com/imgextra/i2/O1CN016b1mMM1FxJlsXfWhU_!!6000000000553-2-tps-96-30.png"
  20.           alt=""
  21.         />
  22.       </div>
  23.       <div class="product_info">
  24.         <div class="item">
  25.           <img
  26.             src=" https://gw.alicdn.com/bao/uploaded/i4/2201203762970/O1CN01k9xViY1XoJ5JhDhwG_!!0-item_pic.jpg_300x300q90.jpg_.webp"
  27.             alt=""
  28.           />
  29.           <div class="product_title">
  30.             <div class="product_sub">
  31.               <div>
  32.                 坚果零食大礼包每日坚果混合休闲食品坚果组合小包装年货干果散装
  33.               </div>
  34.               <span class="tag_item">运费险</span>
  35.             </div>
  36.             <div class="product_price">
  37.               <span>￥</span>
  38.               9.9
  39.             </div>
  40.           </div>
  41.         </div>
  42.         <div class="item">
  43.           <img
  44.             src=" https://gw.alicdn.com/bao/uploaded/i4/2201203762970/O1CN01k9xViY1XoJ5JhDhwG_!!0-item_pic.jpg_300x300q90.jpg_.webp"
  45.             alt=""
  46.           />
  47.           <div class="product_title">
  48.             <div class="product_sub">
  49.               <div>
  50.                 坚果零食大礼包每日坚果混合休闲食品坚果组合小包装年货干果散装
  51.               </div>
  52.               <span class="tag_item">运费险</span>
  53.             </div>
  54.             <div class="product_price">
  55.               <span>￥</span>
  56.               9.9
  57.             </div>
  58.           </div>
  59.         </div>
  60.         <div class="item">
  61.           <img
  62.             src=" https://gw.alicdn.com/bao/uploaded/i4/2201203762970/O1CN01k9xViY1XoJ5JhDhwG_!!0-item_pic.jpg_300x300q90.jpg_.webp"
  63.             alt=""
  64.           />
  65.           <div class="product_title">
  66.             <div class="product_sub">
  67.               <div>
  68.                 坚果零食大礼包每日坚果混合休闲食品坚果组合小包装年货干果散装
  69.               </div>
  70.               <span class="tag_item">运费险</span>
  71.             </div>
  72.             <div class="product_price">
  73.               <span>￥</span>
  74.               9.9
  75.             </div>
  76.           </div>
  77.         </div>
  78.       </div>
  79.     </div>
  80.   </body>
  81. </html>

效果展示图

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