请检查下代码

来源：3-17 编程练习

hehe纷扬

2021-07-11 09:03:10

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      /* 在此处补充代码*/
      * {
        margin: 0;
        padding: 0;
      }
      header {
        display: flex;
        justify-content: space-around;
        background-color: #000;
      }
      .logo img {
        display: block;
      }
      .nav {
        display: flex;
        align-items: center;
        width: 400px;
        font-size: 24px;
        justify-content: space-between;
        color: #fff;
      }
      .nav li {
        list-style: none;
      }
      .login {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 120px;
      }
      .login input {
        background-color: #ff9400;
        border: none;
        color: #fff;
        padding: 5px;
        border-radius: 5px;
        font-size: 20px;
        font-weight: bold;
      }
      section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 400px;
        flex-wrap: wrap;
      }
      .section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #add8e6;
        width: 45%;
        border-radius: 10px;
      }
      .section .box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 180px;
        font-size: 22px;
        width: 60%;
      }
      .section .shopping .btn {
        color: #fff;
        background-color: #ff9700;
        font-size: 22px;
        font-weight: bold;
        padding: 10px;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <div class="logo">
        <img
          src="http://climg.mukewang.com/59197ab000014f1503000100.jpg"
          alt=""
        />
      </div>
      <ul class="nav">
        <li>课程</li>
        <li>路径</li>
        <li>猿问</li>
        <li>手记</li>
      </ul>
      <div class="login">
        <input type="button" value="登录" />
        <input type="button" value="注册" />
      </div>
    </header>
    <!-- 主体内容 -->
    <section>
      <div class="section">
        <div class="box">
          <p>《前端小白入门手册》</p>
          <div>适用人群：没有任何前端基础的小白</div>
          <div>费用：￥499</div>
        </div>
        <div class="shopping">
          <div class="btn">加入购物车</div>
        </div>
      </div>
      <div class="section">
        <div class="box">
          <p>《HTML5月CSS3实现动态网页》</p>
          <div>适用人群：有html和css基础的童鞋</div>
          <div>费用：￥599</div>
        </div>
        <div class="shopping">
          <div class="btn">加入购物车</div>
        </div>
      </div>
      <div class="section">
        <div class="box">
          <p>《HTML5月CSS3实现动态网页》</p>
          <div>适用人群：有html和css基础的童鞋</div>
          <div>费用：￥599</div>
        </div>
        <div class="shopping">
          <div class="btn">加入购物车</div>
        </div>
      </div>
      <div class="section">
        <div class="box">
          <p>《HTML5月CSS3实现动态网页》</p>
          <div>适用人群：有html和css基础的童鞋</div>
          <div>费用：￥599</div>
        </div>
        <div class="shopping">
          <div class="btn">加入购物车</div>
        </div>
      </div>
    </section>
  </body>
</html>