上节课我们完成了如下的页面:
● 现在我们来替换左边文本框的内容
<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;
}
这节课我们就讲到这里,下节课接着美化这个表单内容;