博客列表 >12-28作业:Grid布局版 商品交易区

12-28作业:Grid布局版 商品交易区

十年一梦
十年一梦原创
2019年12月30日 16:00:18663浏览

12-28作业:Grid布局版 商品交易区

  • 代码提交
    html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>公共花卉交易区</title>
  6. <link rel="stylesheet" href="grid_public_second_hand.css">
  7. </head>
  8. <body>
  9. <!--引入大标题-->
  10. <div class="public-headline">
  11. <span>花卉交易</span>
  12. </div>
  13. <!--花卉交易区-->
  14. <div class="public-second-hand">
  15. <!-- 标题一-->
  16. <div class="title-first">
  17. <a href="">抢好货</a>
  18. <span> 0低价, 便捷,安全,快速 </span>
  19. </div>
  20. <!-- 标题二-->
  21. <div class="title-second">
  22. <span>热门分类</span>
  23. <a href="">蓝紫色</a>
  24. <a href="">紫红色</a>
  25. <a href="">白色</a>
  26. <a href="">粉红色</a>
  27. <a href="">红色</a>
  28. <a href="">绿色</a>
  29. </div>
  30. <!-- <div class="goods">-->
  31. <div class="goods-list">
  32. <div class="intro">
  33. <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  34. <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  35. <div>
  36. <span>¥ 389</span>
  37. <span>红色花</span>
  38. </div>
  39. </div>
  40. <div class="intro">
  41. <a href=""><img src="../../../static/images/shop/shop2.jpg" alt=""></a>
  42. <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  43. <div>
  44. <span>¥ 389</span>
  45. <span>红色花</span>
  46. </div>
  47. </div>
  48. <div class="intro">
  49. <a href=""><img src="../../../static/images/shop/shop3.jpg" alt=""></a>
  50. <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  51. <div>
  52. <span>¥ 389</span>
  53. <span>红色花</span>
  54. </div>
  55. </div>
  56. <div class="intro">
  57. <a href=""><img src="../../../static/images/shop/shop4.jpg" alt=""></a>
  58. <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  59. <div>
  60. <span>¥ 389</span>
  61. <span>红色花</span>
  62. </div>
  63. </div>
  64. <div class="intro">
  65. <a href=""><img src="../../../static/images/shop/shop5.jpg" alt=""></a>
  66. <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  67. <div>
  68. <span>¥ 389</span>
  69. <span>红色花</span>
  70. </div>
  71. </div>
  72. <div class="intro">
  73. <a href=""><img src="../../../static/images/shop/shop6.jpg" alt=""></a>
  74. <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  75. <div>
  76. <span>¥ 389</span>
  77. <span>红色花</span>
  78. </div>
  79. </div>
  80. <div class="intro">
  81. <a href=""><img src="../../../static/images/shop/shop7.jpg" alt=""></a>
  82. <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  83. <div>
  84. <span>¥ 389</span>
  85. <span>红色花</span>
  86. </div>
  87. </div>
  88. <div class="intro">
  89. <a href=""><img src="../../../static/images/shop/shop8.jpg" alt=""></a>
  90. <a href="">桃红色颜色大丽花花孤立孤芳自赏的美丽花</a>
  91. <div>
  92. <span>¥ 389</span>
  93. <span>红色花</span>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="quick-entry">
  98. <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  99. <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  100. <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  101. <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  102. <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  103. <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  104. </div>
  105. </div>
  106. <!--</div>-->
  107. </body>
  108. </html>
  • css代码
  1. @import "../public_reset.css";
  2. @import "../public_headline/public_headline.css";
  3. .public-second-hand {
  4. width: 1200px;
  5. /*padding: 10px;*/
  6. box-sizing: border-box;
  7. margin: auto;
  8. background-color: #ffffff;
  9. display: grid;
  10. grid-template-columns: 800px 400px;
  11. grid-template-rows: 50px 50px 450px ;
  12. /*grid-gap: 10px;*/
  13. }
  14. .public-second-hand:hover {
  15. box-shadow: 0 0 8px #888888;
  16. }
  17. .public-second-hand > .title-first {
  18. padding: 10px;
  19. grid-row: 1 / 2;
  20. grid-column: 1 / 3;
  21. border-bottom: 1px solid #cccccc;
  22. box-sizing: border-box;
  23. }
  24. .public-second-hand > .title-first > a{
  25. font-size: 23px;
  26. margin-right: 20px;
  27. }
  28. .public-second-hand > .title-first > span {
  29. color: red;
  30. }
  31. .public-second-hand > .title-second {
  32. padding: 10px;
  33. box-sizing: border-box;
  34. grid-row: 2 / 3;
  35. grid-column: 1 / 3;
  36. }
  37. .public-second-hand > .title-second > span {
  38. font-size: 23px;
  39. color: red;
  40. }
  41. .public-second-hand > .title-second > span ~ a {
  42. margin-left: 20px;
  43. }
  44. .public-second-hand > .goods-list {
  45. grid-row: 3 / 4;
  46. grid-column: 1 / 2;
  47. display: grid;
  48. grid-template-rows: repeat(2, 210px);
  49. grid-template-columns: repeat(4, 200px);
  50. }
  51. .public-second-hand > .goods-list > .intro {
  52. padding: 10px;
  53. box-sizing: border-box;
  54. display: grid;
  55. grid-template-rows: 130px 50px 20px;
  56. grid-template-columns: 200px;
  57. }
  58. .public-second-hand > .goods-list > .intro > a {
  59. padding: 5px;
  60. box-sizing: border-box;
  61. }
  62. .public-second-hand > .goods-list > .intro > a img {
  63. width: 180px;
  64. height: 120px;
  65. border-radius: 5px;
  66. }
  67. .public-second-hand > .goods-list > .intro > div {
  68. display: grid;
  69. grid-template-columns: 1fr 1fr;
  70. grid-template-rows: 1fr;
  71. padding: 0 10px;
  72. }
  73. .public-second-hand > .goods-list > .intro > div > span:first-of-type{
  74. color: red;
  75. }
  76. .public-second-hand > .goods-list > .intro > div > span:last-of-type{
  77. color: white;
  78. padding: 0 5px;
  79. background-color: #55ce9f;
  80. margin-left: auto;
  81. }
  82. .public-second-hand > .quick-entry {
  83. display: grid;
  84. grid-template-rows: 150px 150px 55px 55px;
  85. grid-template-columns: repeat(2, 200px);
  86. }
  87. .public-second-hand > .quick-entry > a {
  88. padding: 15px;
  89. box-sizing: border-box;
  90. }
  91. .public-second-hand > .quick-entry > a img {
  92. width: 170px;
  93. height: 130px;
  94. }
  95. .public-second-hand > .quick-entry a:nth-of-type(5){
  96. grid-row: 3 / 4;
  97. grid-column: 1 / 3;
  98. padding: 0 15px;
  99. }
  100. .public-second-hand > .quick-entry a:nth-of-type(5) > img{
  101. width: 370px;
  102. height: 55px;
  103. }
  104. .public-second-hand > .quick-entry a:nth-of-type(6){
  105. grid-row: 4 / 5;
  106. grid-column: 1 / 3;
  107. padding: 0 15px;
  108. }
  109. .public-second-hand > .quick-entry a:nth-of-type(6) > img{
  110. width: 370px;
  111. height: 55px;
  112. }

完成图

总结

  • Grid 布局个人感觉适合整体大布局,小的方面还没有flex 简单;
  • 可能是第一次接触,就是觉得有点麻烦,比如flex 设定大方向,里面的细节处理都不需要去仔细研究,感觉没有flex智能,还需要多联系;

附:手写Gird 属性文档

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