#

作业

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    li{
      list-style-type:none;
    }
    .new-courses {
      margin: 10px 30px 50px 30px;
    }
.list{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
    .top {
      display: flex;
      justify-content: space-between;
      height:60px ;
    }
    .sbg{
      background-color: rgb(240, 211, 211);
      font-size: small;
      font-family: 'SimSun';
    }
    .desc{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-content: space-between;
  font-size:xx-small;
  font-family: 'SimSun';
  color: rgba(15, 13, 13, 0.779);
  height: 50px;
  line-height: 50px;
    }
  </style>
  <!-- 整体可看成1行2行 -->
  <div class="new-courses">
    <div class="top">
      <h3>最新课程</h3>
      <a href="">更多</a>
    </div>
    <!-- 2行5列 -->
    <div class="coures">
      <ul class="list">
<? for($x=1; $x<=10; $x++) { ?>
        <li class="item">
          <a href=""><img width="190.5" height="100" src="63e202276944f543.jpg" alt="" /></a>
          <div class="detail">
            <div>
              <span class="sbg">初级</span>
              <a href="">Apipost入门到精通</a>
            </div>
            <div class="desc">
              <span>1234次学习</span>
              <span>收藏</span>
            </div>
          </div>
        </li>
<?  }
?>
    </div>
  </div>
</body>
</html>
仿写php中文网片段

#

作业
