0628作业

前端grid容器布局仿制php中文网课程网页布局：

html部分代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="mofang.css" />
    <title>php中文网课程</title>
  </head>
  <body>
    <h2>php入门精品课程</h2>
    <div class="container">
      <div class="item">
        <img src="images/1.jpg" alt="" />
        <a href=""></a>
      </div>
      <div class="item">
        <img src="images/2.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">编程分享学习方法分享直播</a>
          <span>1W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/3.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">2018前端入门_HTML5</a>
          <span>18W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/4.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">CSS视频教程-玉女心经</a>
          <span>10W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/5.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">Javascript极速入门-玉女心经</a>
          <span>10W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/6.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">独孤九剑(6)_jQuery视频教程</a>
          <span>12W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/7.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">30分钟学会网站布局</a>
          <span>6W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/8.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">[公益直播]Web前端开发</a>
          <span>5W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/9.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">phpStudy极速入门视频</a>
          <span>40W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/10.jpg" alt="" />
        <div>
          <span>中级</span>
          <a href="">ThinkPHP6.0极速入门</a>
          <span>4W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/11.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">独孤九剑(4)_PHP视频</a>
          <span>50W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/12.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">php完全自学手册</a>
          <span>20W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/13.jpg" alt="" />
        <div>
          <span>初级</span>
          <a href="">MySQL权威开发指南</a>
          <span>2W+次播放</span>
        </div>
      </div>
      <div class="item">
        <img src="images/14.jpg" alt="" />
        <div>
          <span>中级</span>
          <a href="">[公益直播]PHP实战开发</a>
          <span>3W+次播放</span>
        </div>
      </div>
    </div>
  </body>
</html>

css代码部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #555;
}
.item > span:nth-of-type(2n-1) {
  color: white;
  font-size: 0.6rem;
  padding: 2px;
  background-color: #999;
  border-radius: 3px;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container {
  width: 1042px;
  height: 600px;
  display: grid;
  /* 注意参数中间是有逗号的 */
  grid-template-columns: repeat(5, 200px);
  grid-template-rows: repeat(3, 180px);
  gap: 20px;
  margin: auto;
  /* 设置命名区域名称 */
  grid-template-areas:
    "pic1 . . . ."
    ". . . . ."
    ". . . . .";
}
.container > .item {
  /* border: 1px solid #000; */
  border-radius: 10px;
  box-shadow: 0 0 6px rgb(179, 179, 179);
  position: relative;
}
.container > .item:first-of-type {
  grid-row: span 2;
  text-align: center;
  color: #4d555d;
  grid-area: pic1;
}
h2 {
  text-align: center;
  margin: 20px;
}
.item > img {
  width: 100%;
  height: 80%;
  border-radius: 5px 5px 0 0;
}
.item > img:first-of-type {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.item > div {
  position: relative;
  height: 60px;
  top: -30%;
  background-color: whitesmoke;
  padding: 3px;
  border-radius: 4px;
}
.item > div > span:first-of-type {
  background-color: #999;
  padding: 3px;
  color: aliceblue;
  font-size: 0.6rem;
  border-radius: 5px;
  text-align: center;
}
.item > div > a {
  font-size: 0.8rem;
  padding: 2px;
  white-space: nowrap;
  text-overflow: clip;
}
/* a标签后面添加一个伪类after，强制换行，播放次数信息就重新开一行 */
.item > div > a::after {
  content: "\A";
  white-space: pre;
}
.item > div > span:last-of-type {
  color: #888;
  font-size: 0.6rem;
  padding: 2px;
  text-align: left;
}
.item > div:hover {
  color: #333;
  top: -68%;
  height: 120px;
}

关键步骤

1.命名区域布局比较方便

    grid-template-areas:
    "pic1 . . . ."
    ". . . . ."
    ". . . . .";
}

2.每个格子对应一个item，第一个item跨了行，grid-row: span 2
3.第一个item绑定pic1放入项目即可
4.下方初级，课程名，播放次数等信息放进一个div中，并使用相对定位，向上偏移一定的距离
5.div设置hover效果，调整偏移距离，显示提拉效果
6.a标签后面添加一个伪类after，强制换行，播放次数信息就重新开一行

仿制目标图

效果图：

课堂小结：

属性	功能
`display:grid`	声明grid容器
grid-template-column:	grid-template-column:列1宽列2宽 …… 列n宽，1fr为自适应(`1fr指的是剩余空间分1份全都给它`)
grid-template-row:	grid-template-row:行1高行2高 …… 行n高，1fr为自适应
gap	column-gap列间隙,row-gap行间隙
grid-column-start	列开始
grid-column-end	列结束，默认跨一行或者一列。结束可以不写
grid-row-start	行开始
grid-row-end	行结束，默认跨一行或者一列。结束可以不写
`grid-area`	定义区域，上述四个定位的简写`grid-area：行起始/列起始/行结束/列结束`，可以结合span使用,这种叫索引网格区；如果是字符串，叫命名网格区
span	行与列的跨越。网格区域，矩形，不用计算，只需要知道跨越多少就行
grid-column参数合并简写	grid-column：起始/结束(span n)
grid-row参数合并简写	grid-row：起始/结束(span n)
grid-column：span n	根据项目的当前默认位置进行简化grid-column-end：span n同样效果
repeat(次数尺寸)	基础尺寸重复n次