SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>海贼编程课</title>
  </head>
  <body>
    <div class="container">
      <div class="course-list">
        <div class="course-item">
          <div class="course-item-img">
            <img
              src="https://www.haizeix.com/files/course/2020/04-28/155750e99ac6578308.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="course-item-text">
            <span class="course-name">高薪班课程包</span>
            <span class="course-price">3000元起</span>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-img">
            <img
              src="https://www.haizeix.com/files/course/2020/04-28/155750e99ac6578308.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="course-item-text">
            <span class="course-name">高薪班课程包</span>
            <span class="course-price">3000元起</span>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-img">
            <img
              src="https://www.haizeix.com/files/course/2020/04-28/155750e99ac6578308.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="course-item-text">
            <span class="course-name">高薪班课程包</span>
            <span class="course-price">3000元起</span>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-img">
            <img
              src="https://www.haizeix.com/files/course/2020/04-28/155750e99ac6578308.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="course-item-text">
            <span class="course-name">高薪班课程包</span>
            <span class="course-price">3000元起</span>
          </div>
        </div>
        <div class="course-item">
          <div class="course-item-img">
            <img
              src="https://www.haizeix.com/files/course/2020/04-28/155750e99ac6578308.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="course-item-text">
            <span class="course-name">高薪班课程包</span>
            <span class="course-price">3000元起</span>
          </div>
        </div>
      </div>
      </div>
    </div>
  </body>
</html>


            
.container {
    max-width: 1500px;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.course-list {
    margin: 0 auto;
    padding: 20px 10px;
}

.course-item {
    display: inline-block;
    max-width: 300px;
    margin-bottom: 15px;
    margin-right: 10px;
    padding: 15px 10px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

.course-item:hover {
    box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

.course-item-img {
    max-width: 100%;
}

.course-item-img > img {
    max-width: 100%;
}

.course-item-text {
    margin-top: 5px;
    font-size: 14px;
}

.course-name {
    color: rgba(0, 0, 0, 0.65);
}

.course-price {
    margin-left: 49%;
    color: red;
}