博客列表 >10.28作业

10.28作业

子墨吖ฅฅ
子墨吖ฅฅ原创
2022年10月30日 14:07:18348浏览

淘宝首页商品布局

index.css布局内容

  1. * {
  2. padding: 0;
  3. margin: 0;
  4. }
  5. body {
  6. width: 100%;
  7. height: 100%;
  8. background-color: #eee;
  9. }
  10. .container {
  11. width: 1200px;
  12. height: 450px;
  13. background-color: #fff;
  14. margin: 0 auto;
  15. box-sizing: border-box;
  16. padding: 20px;
  17. }
  18. .container .title {
  19. display: flex;
  20. }
  21. .container .title .title_span {
  22. color: #111;
  23. font-weight: bold;
  24. font-size: 24px;
  25. }
  26. .container .title .title_img {
  27. width: 64px;
  28. height: 18px;
  29. margin: 10px 0 0 6px;
  30. }
  31. .container .product_info {
  32. display: grid;
  33. grid-template-columns: 1fr 1fr 1fr;
  34. margin-top: 15px;
  35. }
  36. .container .product_info .item {
  37. width: 378px;
  38. height: 178px;
  39. background-color: #eee;
  40. border-radius: 8px;
  41. box-sizing: border-box;
  42. padding: 10px;
  43. display: flex;
  44. }
  45. .container .product_info .item:hover {
  46. border: 1px solid #ff5000;
  47. }
  48. .container .product_info .item img {
  49. width: 150px;
  50. height: 150px;
  51. border-radius: 8px;
  52. }
  53. .container .product_info .item .product_title {
  54. padding-left: 10px;
  55. display: flex;
  56. flex-direction: column;
  57. place-content: space-between;
  58. }
  59. .container .product_info .item .product_title .product_sub div:first-of-type {
  60. margin-bottom: 10px;
  61. }
  62. .container .product_info .item .product_title .tag_item {
  63. border: 1px solid #f40;
  64. color: #ff5000;
  65. border-color: #fab596;
  66. background: #ffffff;
  67. font-size: 12px;
  68. padding: 3px 5px;
  69. border-radius: 5px;
  70. }
  71. .container .product_info .item .product_title .product_price {
  72. color: #ff5000;
  73. font-size: 22px;
  74. }
  75. .container .product_info .item .product_title .product_price span {
  76. font-size: 14px;
  77. }
  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>

效果展示图

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议