博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
4377
积分:0
P豆:52

基于grid布局的二手交易(1228前端学习开发作业)

2020年01月04日 22:27:10阅读数:207博客 / 小辰/ 前端学习

1.先来效果图

主要是:左边的网格是四列两行,右边的是一列三行,然后再细分。

2.HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>二手商品列表</title>
  6. <link rel="stylesheet" href="css/secondhand.css">
  7. </head>
  8. <body>
  9. <!--交易专区-->
  10. <div class="public-second-hand">
  11. <!-- 抢好货标题-->
  12. <div class="title1">
  13. <a href="">抢好货</a>
  14. <span>0元低价,便捷,安全</span>
  15. </div>
  16. <!-- 分类标题-->
  17. <div class="title2">
  18. <span>热门分类</span>
  19. <!-- 在光标所在行按CTRL+D可以快速复制当前行-->
  20. <a href="">美女写真</a>
  21. <a href="">日本美女</a>
  22. <a href="">美国美女</a>
  23. <a href="">国内美女</a>
  24. </div>
  25. <!-- 商品内容区-->
  26. <div class="goods">
  27. <!-- 商品列表-->
  28. <div class="goods-list">
  29. <!-- 单个商品块-->
  30. <div class="intro">
  31. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  32. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  33. <div>
  34. <span>¥ 333</span>
  35. <span>美女</span>
  36. </div>
  37. </div>
  38. <!-- 单个商品块-->
  39. <div class="intro">
  40. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  41. <a href="">美女性感写真海报墙艺术装饰画贴画图2</a>
  42. <div>
  43. <span>¥ 333</span>
  44. <span>美女</span>
  45. </div>
  46. </div>
  47. <!-- 单个商品块-->
  48. <div class="intro">
  49. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  50. <a href="">美女性感写真海报墙艺术装饰画贴画图3</a>
  51. <div>
  52. <span>¥ 333</span>
  53. <span>美女</span>
  54. </div>
  55. </div>
  56. <!-- 单个商品块-->
  57. <div class="intro">
  58. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  59. <a href="">美女性感写真海报墙艺术装饰画贴画图4</a>
  60. <div>
  61. <span>¥ 333</span>
  62. <span>美女</span>
  63. </div>
  64. </div>
  65. <!-- 单个商品块-->
  66. <div class="intro">
  67. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  68. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  69. <div>
  70. <span>¥ 333</span>
  71. <span>美女</span>
  72. </div>
  73. </div>
  74. <!-- 单个商品块-->
  75. <div class="intro">
  76. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  77. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  78. <div>
  79. <span>¥ 333</span>
  80. <span>美女</span>
  81. </div>
  82. </div>
  83. <!-- 单个商品块-->
  84. <div class="intro">
  85. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  86. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  87. <div>
  88. <span>¥ 333</span>
  89. <span>美女</span>
  90. </div>
  91. </div>
  92. <!-- 单个商品块-->
  93. <div class="intro">
  94. <a href=""><img src="img/shop5.jpg" alt="" width="176" height="120"></a>
  95. <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  96. <div>
  97. <span>¥ 333</span>
  98. <span>美女</span>
  99. </div>
  100. </div>
  101. </div>
  102. <!-- 右侧图片功能区-->
  103. <div class="quick-entry">
  104. <div>
  105. <a href=""><img src="img/1.png" alt=""></a>
  106. <a href=""><img src="img/2.png" alt=""></a>
  107. <a href=""><img src="img/3.png" alt=""></a>
  108. <a href=""><img src="img/4.png" alt=""></a>
  109. </div>
  110. <div>
  111. <a href=""><img src="img/ad2.jpg" alt=""></a>
  112. <a href=""><img src="img/image.png" alt=""></a>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </body>
  118. </html>

3.css代码

  1. /*重置样式*/
  2. @import "reset.css";
  3. .public-second-hand {
  4. width: 1200px;
  5. padding: 10px;
  6. /*防止盒子撑大*/
  7. box-sizing: border-box;
  8. margin:auto;
  9. /*加圆角*/
  10. border-radius: 5px;
  11. background-color: #fff;
  12. }
  13. /*鼠标经过加阴影*/
  14. .public-second-hand:hover {
  15. box-shadow: 0 0 8px #888;
  16. }
  17. /*抢好货标题*/
  18. .public-second-hand > .title1 {
  19. height: 50px;
  20. /*一个像素的的底部实线*/
  21. border-bottom: 1px solid #cccccc;
  22. box-sizing: border-box;
  23. }
  24. .public-second-hand > .title1 > a {
  25. font-size: 23px;
  26. margin-right: 20px;
  27. }
  28. .public-second-hand > .title1 > span {
  29. color: red;
  30. }
  31. /*分类标题*/
  32. .public-second-hand > .title2 {
  33. height: 55px;
  34. }
  35. .public-second-hand > .title2 > span {
  36. color: red;
  37. font-size: 23px;
  38. }
  39. .public-second-hand > .title2 > span ~ a {
  40. padding-left: 20px;
  41. }
  42. /*鼠标经过分类标题时的颜色变化*/
  43. .public-second-hand > .title2 > span ~ a:hover {
  44. color: lightcoral;
  45. }
  46. /*商品内容区*/
  47. .public-second-hand > .goods {
  48. /*转为GRID*/
  49. display: grid;
  50. /*画列*/
  51. grid-template-columns: 790px 390px;
  52. /*画行*/
  53. grid-template-rows: 440px ;
  54. }
  55. .public-second-hand > .goods > .goods-list {
  56. /*转GRID*/
  57. display: grid;
  58. /*画四列两行*/
  59. /*repeat(4,1fr)属性为重复几次后面的参数*/
  60. grid-template-columns:repeat(4,1fr);
  61. grid-template-rows: repeat(2,1fr);
  62. }
  63. .public-second-hand > .goods > .goods-list > .intro{
  64. width: 176px;
  65. height: 200px;
  66. padding: 5px;
  67. box-sizing: border-box;
  68. display: grid;
  69. /*画一列三行*/
  70. grid-template-columns:1fr;
  71. grid-template-rows: repeat(3,1fr);
  72. /*设置行间距*/
  73. grid-row-gap: 5px;
  74. }
  75. .public-second-hand > .goods > .goods-list > .intro img {
  76. border: 1px solid #cccccc;
  77. border-radius: 5px;
  78. }
  79. .public-second-hand > .goods > .goods-list > .intro > div {
  80. display: grid;
  81. grid-template-columns: repeat(2,1fr);
  82. grid-template-rows: 1fr;
  83. }
  84. .public-second-hand > .goods > .goods-list > .intro span:first-of-type {
  85. color: red;
  86. }
  87. .public-second-hand > .goods > .goods-list > .intro span:last-of-type {
  88. color: white;
  89. background-color: #55ce9f;
  90. padding: 0 5px;
  91. margin-left: auto;
  92. }
  93. /*右侧图片功能区*/
  94. .public-second-hand > .goods > .quick-entry {
  95. display: grid;
  96. /*画两行一列,间距10px*/
  97. grid-template-columns: 1fr;
  98. grid-template-rows: repeat(2,1fr);
  99. grid-row-gap: 10px;
  100. }
  101. .public-second-hand > .goods > .quick-entry > div:first-of-type {
  102. display: grid;
  103. /*画两行两列*/
  104. grid-template-columns:repeat(2,1fr);
  105. grid-template-rows: repeat(2,1fr);
  106. grid-gap: 5px;
  107. }
  108. .public-second-hand > .goods > .quick-entry > div:first-of-type img {
  109. width: 190px;
  110. }
  111. .public-second-hand > .goods > .quick-entry > div:last-of-type img {
  112. width: 390px;
  113. height: 60px;
  114. margin-top: 10px;

4.手写的属性

5.小结

grid布局比felx布局代码多,但是能够比较直观,方便的达到布局的效果。只要把一个页面的结构,划分清楚,就可以很容易的实现效果。

批改老师:天蓬大人天蓬大人

批改状态:合格

老师批语:grid有利有弊, 与flex互补

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论