grid实战作业

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

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.     }
  7.     a:hover {
  8.         color: red;
  9.     }
  11.     .lastcenten {
  12.         width: 1020px;
  13.         border: 1px solid #000;
  14.         margin: 0 auto;
  15.     }
  17.     /* 使用grid 布局 */
  18.     .lastcenten .bodges {
  19.         display: grid;
  20.         grid-template-columns: repeat(5, 1fr);
  21.         gap: 30px 10px;
  23.     }
  25.     .bodges .curse {
  26.         overflow: hidden;
  27.     }
  29.     .lastcenten .bodges img {
  30.         width: 100%;
  31.         border-radius: 5px 5px 0 0;
  32.     }
  34.     .lastcenten .bodges img:hover {
  35.         transform: scale(1.1);
  36.         transition: all 0.3s;
  37.     }
  39.     .bodges .bodges_centent {
  40.         background-color: #fff;
  41.         border-radius: 0 0 5px 5px;
  42.         padding: 15px;
  43.     }
  45.     .bodges_centent .title span {
  46.         color: red;
  47.         background-color: bisque;
  48.         border-radius: 2px;
  49.         padding: 3px 4px;
  50.         text-align: center;
  51.         font-size: x-small;
  52.     }
  54.     .bodges_centent .bodges_botton {
  55.         display: flex;
  56.         place-content: space-between;
  57.         font-size: small;
  58.         color: #aaa;
  59.         margin-top: 10px;
  60.         gap: 10px;
  61.         padding: 2px;
  62.     }
  63. </style>
  64. div 部分代码
  65. <div class="lastcenten">
  66.     <h2>最新课程</h2>
  67.     <div class="bodges">
  68.         <div class="curse">
  69.             <a href="">
  70.                 <img src="https://img.php.cn/upload/course/000/000/068/6413e7ac3ce52126.jpg" alt="">
  71.             </a>
  72.             <div class="bodges_centent">
  73.                 <div class="title">
  74.                     <span>中级 </span>
  75.                     <a href="">php 编程从零到就业(2023 最新课程)</a>
  76.                 </div>
  77.                 <div class="bodges_botton">
  78.                     <span>34345学习</span>
  79.                     <span>收藏</span>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </div>
" class="reference-link">【转自：盐城网站建设 http://www.1234xp.com/yancheng.html 复制请保留原URL】
更多阅读