博主信息
博文 28
粉丝 0
评论 0
访问量 18493
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
10.28作业
子墨吖ฅฅ
原创
579人浏览过

淘宝首页商品布局

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>

效果展示图

批改老师:PHPzPHPz

批改状态:合格

老师批语:效果不错
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学