博客列表 >grid实战作业

grid实战作业

失忆孤独患者
失忆孤独患者原创
2023年03月23日 14:24:55537浏览

css 部分代码
我们使用了grid 布局
grid-template-columns: 属性负责把窗口进行表格化
gap 是负责把项目的间隙分开
<style>
body {
background-color: beige;
}

  1. body a {
  2. text-decoration: none;
  3. color: rgb(0, 255, 60);
  4. font-size: small;
  5. }
  6. a:hover {
  7. color: red;
  8. }
  9. .lastcenten {
  10. width: 1020px;
  11. border: 1px solid #000;
  12. margin: 0 auto;
  13. }
  14. /* 使用grid 布局 */
  15. .lastcenten .bodges {
  16. display: grid;
  17. grid-template-columns: repeat(5, 1fr);
  18. gap: 30px 10px;
  19. }
  20. .bodges .curse {
  21. overflow: hidden;
  22. }
  23. .lastcenten .bodges img {
  24. width: 100%;
  25. border-radius: 5px 5px 0 0;
  26. }
  27. .lastcenten .bodges img:hover {
  28. transform: scale(1.1);
  29. transition: all 0.3s;
  30. }
  31. .bodges .bodges_centent {
  32. background-color: #fff;
  33. border-radius: 0 0 5px 5px;
  34. padding: 15px;
  35. }
  36. .bodges_centent .title span {
  37. color: red;
  38. background-color: bisque;
  39. border-radius: 2px;
  40. padding: 3px 4px;
  41. text-align: center;
  42. font-size: x-small;
  43. }
  44. .bodges_centent .bodges_botton {
  45. display: flex;
  46. place-content: space-between;
  47. font-size: small;
  48. color: #aaa;
  49. margin-top: 10px;
  50. gap: 10px;
  51. padding: 2px;
  52. }
  53. </style>
  54. div 部分代码
  55. <div class="lastcenten">
  56. <h2>最新课程</h2>
  57. <div class="bodges">
  58. <div class="curse">
  59. <a href="">
  60. <img src="https://img.php.cn/upload/course/000/000/068/6413e7ac3ce52126.jpg" alt="">
  61. </a>
  62. <div class="bodges_centent">
  63. <div class="title">
  64. <span>中级 </span>
  65. <a href="">php 编程从零到就业(2023 最新课程)</a>
  66. </div>
  67. <div class="bodges_botton">
  68. <span>34345学习</span>
  69. <span>收藏</span>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
" class="reference-link">
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议