Sākums Izpētīt Palīdzība
Pierakstīties
lovecoding
/
W260426
10
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Koks: c851d8f8b2
Atzari Tagi
W260426
/
2_CSS
/
练习5_商品卡.html

练习5_商品卡.html 1.5 KB
Vēsture Neapstrādāts

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <title>Document</title>
    7. 

  7.     <style>
    8. 

  8.         .product-card{
    9. 

  9.             width: 234px;
    10. 

  10.             margin: 100px auto;
    11. 

  11.             /* 如果数值为0 那么单位可以省略 如果值是0.X 0也可以省略 0.5=.5 */
    12. 

  12.             box-shadow: 0 0 10px rgba(0,0,0,.5);
    13. 

  13.             padding: 10px;
    14. 

  14.             text-align: center;
    15. 

  15.         }
    16. 

  16.         .product-img img{
    17. 

  17.             width: 100%;
    18. 

  18.         }
    19. 

  19.         .product-title{
    20. 

  20.             /* 文字大小尽量不要小于12px */
    21. 

  21.             font-size: 14px;
    22. 

  22.             font-weight: 400;
    23. 

  23.             color: #333;
    24. 

  24.         }
    25. 

  25.         .product-info{
    26. 

  26.             font-size: 12px;
    27. 

  27.             color: #b0b0b0;
    28. 

  28.             text-wrap: nowrap;
    29. 

  29.             overflow: hidden;
    30. 

  30.             text-overflow: ellipsis;
    31. 

  31.             margin-top: 10px;
    32. 

  32.             margin-bottom: 20px;
    33. 

  33.         }
    34. 

  34.         .product-price span{
    35. 

  35.             color: #ff6700;
    36. 

  36.         }
    37. 

  37.         .product-price del{
    38. 

  38.             color: #b0b0b0;
    39. 

  39.         }
    40. 

  40.     </style>
    41. 

  41. </head>
    42. 

  42. <body>
    43. 

  43.     <div class="product-card">
    44. 

  44.         <div class="product-img">
    45. 

  45.             <img src="./img/phone2.png" alt="img">
    46. 

  46.         </div>
    47. 

  47.         <div class="product-title">REDMI Turbo 5 MAX</div>
    48. 

  48.         <div class="product-info">天玑 9500s | 9000mAh 最大小米电池 | 1.5K 超级阳光屏</div>
    49. 

  49.         <div class="product-price">
    50. 

  50.             <span>2299元起</span>
    51. 

  51.             <del>2499元</del>
    52. 

  52.         </div>
    53. 

  53.     </div>
    54. 

  54. </body>
    55. 

  55. </html>
    56.