css 部分代码
我们使用了grid 布局
grid-template-columns: 属性负责把窗口进行表格化
gap 是负责把项目的间隙分开
<style>
body {
background-color: beige;
}
body a {
text-decoration: none;
color: rgb(0, 255, 60);
font-size: small;
}
a:hover {
color: red;
}
.lastcenten {
width: 1020px;
border: 1px solid #000;
margin: 0 auto;
}
/* 使用grid 布局 */
.lastcenten .bodges {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 30px 10px;
}
.bodges .curse {
overflow: hidden;
}
.lastcenten .bodges img {
width: 100%;
border-radius: 5px 5px 0 0;
}
.lastcenten .bodges img:hover {
transform: scale(1.1);
transition: all 0.3s;
}
.bodges .bodges_centent {
background-color: #fff;
border-radius: 0 0 5px 5px;
padding: 15px;
}
.bodges_centent .title span {
color: red;
background-color: bisque;
border-radius: 2px;
padding: 3px 4px;
text-align: center;
font-size: x-small;
}
.bodges_centent .bodges_botton {
display: flex;
place-content: space-between;
font-size: small;
color: #aaa;
margin-top: 10px;
gap: 10px;
padding: 2px;
}
</style>
div 部分代码
<div class="lastcenten">
<h2>最新课程</h2>
<div class="bodges">
<div class="curse">
<a href="">
<img src="https://img.php.cn/upload/course/000/000/068/6413e7ac3ce52126.jpg" alt="">
</a>
<div class="bodges_centent">
<div class="title">
<span>中级 </span>
<a href="">php 编程从零到就业(2023 最新课程)</a>
</div>
<div class="bodges_botton">
<span>34345学习</span>
<span>收藏</span>
</div>
</div>
</div>
</div>