我们的目标如下图所示

● 首先建立文件夹，生成框架代码

● 把页面上面的HTML元素写进去

<header>
      <nav>
        <div>LOGO</div>
        <div>NAVIGATION</div>
      </nav>

      <div>
        <h1>A healty meal delivered to your door, every single day</h1>
        <p>
          The smart 365-days-per-year food subscription that will make you eat
          healty algain. Tailored to your personal tastes and nutritional needs
        </p>
        <a href="#" class="btn">Start eating well</a>
      </div>
    </header>

    <section>
      <div>
        <h2>Some random heading</h2>
        <p>
          A balanced and nutritious diet plays an essential role in maintaining
          overall health and well-being. When you provide your body with the
          right amounts of nutrients, you have energy, can achieve healthy
          weight, and may even reduce the risk of chronic diseases. A good daily
          diet should focus on whole foods like fruits and vegetables, whole
          grains, lean protein, fat-free or low-fat dairy products and healthy
          fats.
        </p>
      </div>
    </section>

● 接着我们来设置导航的字体

   nav {
            font-size: 20px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
        }

● 然后我们设置标题和段落的字体

h1 {
font-size: 52px;
margin-bottom: 32px;
}

p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 48px;
}

● 写按钮的样式

.btn:visited {
      font-size: 20px;
      font-weight: 600;
      background-color: #e67e22;
      color: #fff;
      text-decoration: none;
      display: inline-block;
      padding: 16px 32px;
      border-radius: 9px;
    }

● 设置副标题和段落的字体样式

h2 {
          font-size: 44px;
          margin-bottom: 48px;
        }

        section {
          padding: 96px 0;
        }

● 接着我们是的几个元素进行居中，我们给这些需要居中的元素全部加上居中的class

 .container {
          margin: 0 auto;
          width: 1200px;
        }

● 忘记添加消除边距和填充了

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

● 我们想让header的部分填充这个视图高度

 header {
          background-color: orange;
          height: 100vh;
        }

接下里的操作，让我们下节课见吧！