仿写PHP中文网首页:最新课程

html代码

  <div class="new-courser">
        <div class="top">
         <h3>最新课程</h3>
         <a href="">更多></a>
        </div>
      <ul class="courses">
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>
        <li class="item">
          <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
          <div class="detail">
           <div>
            <span>初级</span>
            <a href="" target="_blank"> 8 课程精讲（台湾同胞版）</a>
           </div>
           <div class="desc">
            <span>111学习</span>
            <span>收藏</span>
           </div>
          </div>
        </li>

css代码

    ```css

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  body{
  background-color: #aac7db;
  }
  .new-courses {
  width: 100px;
  margin: auto;
  display: grid;
  grid-template-rows: 75px 600px;
  grid-template-columns: repeat(1, 1fr);
  gap:10px;
  }

  .top {
  width: 1000px;
  height: 75px;
  margin: auto;
  line-height: 75px;
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  }

  .top a {
  place-self: center end;
  display:inline-block;
  width: 80px;
  height: 75px;
  text-align: center;
  line-height: 75px;
  text-decoration: none;
  background-color: white;
  border-radius: 10px;
  }

  .top a:hover {
  cursor: pointer;
  background-color: red;
  border-radius: 10px;
  color: white;
  transition: 0.5s;
  text-decoration: none;
  background-color: red;
  border-radius: 10px;
  }

  .courses{
  display: grid;
  grid-template-rows: repeat(2,1fr);
  grid-template-columns: repeat(5,1fr);
  gap: 30px 20px;
  }

  .courses .detail{
  padding:10px;
  border-radius: 10px;
  background-color: white;
  }

  .courses li.item{
  height: 250px;
  list-style: none;
  border-radius: 10px;
  background-color:white;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  }

  .courses li.item a{
  display: block;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  }

.courses li.item a img{
width: 224px;
object-fit: fill;
overflow: hidden;
}

.courses li.item a img:hover {
transform: scale(1.1);
transition: 0.5s;
}

.courses li.item .detail div {
height: 75px;
}

.courses li.item .detail div:first-child span {
display: inline-block;
padding: 2px 4px;
background-color: tomato;
font-size: 10px;
font-size:small;
color: white;
border-radius: 10px;
margin-right: 5px;
margin-left: 5px;
text-transform: uppercase;
}

.courses li.item .detail a {
display: inline;
font-size: 14px;
text-decoration: none;
}

.courses li.item .detail .desc {
height: 10px;
display: flex;
flex-flow: row nowrap;
place-content: space-between;
align-items: center;
font-size: 14px;
font-size:small;
color: rgb(11, 10, 10);
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
text-transform: uppercase;
font-weight: bold;
}
```

  </div>