102.实战网页行动呼吁部分-第二节

上节课我们完成了如下的页面：

● 现在我们来替换左边文本框的内容

 <div class="cta-text-box">
          <h2 class="heading-secondary">免费享用第一餐！</h2>
          <p class="cta-text">健康、美味、无忧的饭菜在等着你。从今天开始吃得好。您可以随时取消或暂停。第一顿饭我们请! </p>
        </div>

● 然后设置一下样式

.cta-text-box {
  padding: 4.8rem 6.4rem 6.4rem 6.4rem;
  color: #45260a;
} 

.cta .heading-secondary {
  color: #45260a;
  margin-bottom: 3.2rem;
}

.cta-text {
  font-size: 1.8rem;
  line-height: 1.8;
}

● 接着，我们给它添加一些小功能

<form class="cta-form\" action="#">
            <label for="full-name">姓名</label>
            <input id="full-name" type="text" placeholder="张三丰" />
            <label for="email">邮箱</label>
            <input id="email" type="email" placeholder="me@example.com"/>
            <button class="btn">提交</button>
          </form>

#当点击姓名和邮箱的时候，会自动的选择输入框，通过id定位
● 之后我们在添加复选框，在给这个input添加必须项目

 <select id="select-where" required>
              <option value="">选择一种方式</option>
              <option value="friends">朋友或家人介绍</option>
              <option value="postcast">抖音推荐</option>
              <option value="ad">节目播报</option>
              <option value="TikTok">朋友圈广告</option>
              <option value="others">其它</option>
            </select>

● 接着，我们给每个input加上一个div，使得他们以列表的方式排放，并且有利于我们后面布局

● 接着我们添加一些简单的样式

.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}

这节课我们就讲到这里，下节课接着美化这个表单内容；