Correcting teacher:Guanhui
Correction status:qualified
Teacher's comments:还不错!不过要注意一下命名规范!尽量不要使用拼音!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>6.28Grid布局作业</title>
<style>
/* 初始化 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #666666;
font-size: 14px;
}
/* 大盒子 */
.kecheng {
width: 1200px;
height: 646px;
/* 转为grid */
display: grid;
margin: auto;
}
/* 大标题 */
.kechengtitle {
/* 文字居中 */
text-align: center;
/* 项目自身位置居中 */
place-self: center;
}
/* 课程 */
.container {
/* 转为grid布局 */
display: grid;
/* 设置每个格子的宽高 */
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 5px 5px;
}
.container > div {
width: 217px;
height: 166px;
border-radius: 5%;
box-shadow: 0 0 10px #888;
place-self: start center;
}
.container > .item1 {
/* 设置范围 */
grid-area: 1/1/3/2;
width: 217px;
height: 364px;
}
.container > .item1 {
/* 设置范围 */
grid-area: 1/1/3/2;
width: 217px;
height: 364px;
}
.container > div > a > img {
width: 217px;
height: 124px;
}
.container > .item1 > a > img {
width: 217px;
height: 364px;
border-radius: 5%;
}
item2 > a {
position: relative;
}
.item2 > a > .bofang {
display: block;
width: 100px;
height: 30px;
position: absolute;
font-size: 0.7rem;
margin-top: 130px;
margin-left: 10px;
}
.dongtai {
position: absolute;
width: 217px;
height: 60px;
background-color: #fff;
margin-top: 100px;
/* border-radius: 5%; */
transition: margin 0.3s;
}
.dongtai:hover {
margin-top: 80px;
}
.dongtai > h3 > i {
background-color: #666;
color: #fff;
font-size: 0.99rem;
/* display: inline-block; */
margin: 3px 0;
}
</style>
</head>
<body>
<div class="kecheng">
<div class="kechengtitle"><h3>PHP精品入门课程</h3></div>
<div class="container">
<div class="item1">
<a href=""><img src="imges/index_learn_first.jpg" alt="" /></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> 编程学习方法分享直播</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/gy.png" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> 2018前端入门_HTML5</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/html5.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> CSS视频教程-玉女心经</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/css.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> JavaScript极速入门</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/js.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> 独孤九剑(6)</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/jq.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> 30分钟学会网站布局</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/30.jpeg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> 编程学习方法分享直播</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/qd.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> phpStudy极速入门</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/phpstudy.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> TninkPHP6.0极速入门</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/tp.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> 独孤九剑4PHP视频</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/gdjj4.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> php完全自学教程</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/php.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> MySQL权威开发指南</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/php.jpg" alt=""
/></a>
</div>
<div class="item2">
<a href="">
<div class="dongtai">
<h3><i> 初级 </i> [公益直播]PHP实战开发</h3>
</div>
<i class="bofang">1w+次播放</i>
<img src="imges/gy.png" alt=""
/></a>
</div>
</div>
</div>
</body>
</html>