亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

代碼展示

html

  <div class="course">
      <div class="biaoti">
        <h2>熱門(mén)推薦</h2>
        <span class="gengduo">更多</span>
      </div>
      <div class="courses-list">
        <!-- 課程 -->
        <div class="list">
          <!-- 課程圖片 -->
          <a href="">
            <img src="111.jpg" alt="" />
          </a>
          <!-- 課程描述 -->
          <div class="desc">
            <div class="title">
              <small class="tag">中級(jí)</small>
              <a href="">Golang深入理解GPM模型</a>
            </div>
            <div class="other">
              <span>600次學(xué)習(xí)</span>
              <span><span class="iconfont icon-shoucang"></span>收藏</span>
            </div>
          </div>
        </div>
    </div>

css

body {
  background-color: #efefef;
}
body a {
  text-decoration: none;
  color: #555;
  font-size: small;
}
body a:hover {
  color: red;
}
.course {
  width: 1020px;
}
/* 布局 */
.biaoti {
  display: flex;
  place-content: space-between;
  place-items: center;
}
.courses-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px 10px;
}
.list img {
  width: 100%;
  border-radius: 5px 5px 0 0;
  position: static;
  z-index: 1;
}
/* 圖片放大 */
.list img:hover {
  transform: scale(1.1);
  transition: 0.3s;
}
.course {
  /* border: 1px solid #000; */
}
.list {
  background-color: white;
  border-radius: 5px;
  /* 圖片溢出隱藏 */
  overflow: hidden;
}
.list .desc {
  padding: 15px;
  position: static;
  z-index: 2;
}
.list .desc .tag {
  font-size: x-small;
  color: blue;
  background-color: lightcyan;
  padding: 3px 5px;
  border-radius: 3px;
}
.list .desc a {
  line-height: 22px;
}
.list .desc .other {
  color: #aaa;
  font-size: xx-small;
  display: flex;
  place-content: space-between;
  margin-top: 8px;
}
.other .iconfont {
  font-size: 12px;
  margin-right: 3px;
}
.other span:last-child:hover {
  cursor: pointer;
  color: red;
}

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：總體來(lái)說(shuō)不錯(cuò)，繼續(xù)加油，還有下次提交作業(yè)的時(shí)候，要在“狀態(tài)”這一欄選擇“作業(yè)”進(jìn)行提交