css - 如何设置我的电子邮件表单的样式？

Question

我已经学习编码 15 天了。我在 Freecodecamp 上制作了 HTML 模块，并且在 CodePen 上开始了一个迷你元素。我发现我已经忘记了很多东西，但我想继续这个元素，因为它可以帮助我学习东西。

我的迷你元素是一个注册表单。目前只有电子邮件，但稍后我想添加名字/姓氏以及其他数据点。但是我想知道如何设置电子邮件框的样式，使其更大一些，而且我希望能够缩小复选框旁边的文本。但是我在这两个部分都被卡住了。我为表单使用了一个基本模板并从那里进行了调整，但我真的坚持样式。

我的代码如下。我的方向正确吗？

HTML

<!--- These are my sign up form elements --->  
<div class="myForm"><b>Below is a form</b></div></br>

<label for="email">
  <input type="text" placeholder="Enter Email" name="email" required>
  </br></br>
</label>

<label>
  <button type="submit" class="signupbtn">Sign me up!</button>
  </br>
  </br>
</label> 

<label> 
 <input type="checkbox"> I agree to the terms and conditions <a      href="wwww.thisisawebsite.com">here</a></input>
</label> 

CSS

body {
  font-family: Verdana,Arial,sans-serif;
  font-size: 18px;
}

p {
  font-size: 14px;
}

.myForm{
  font-family: Verdana,Arial,sans-serif;
  width: 200px;

}

button {
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  padding: 8px; 
}

label[for=email] {
  font-size: 20px; 
}

Answer 1

body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 18px;
}

.myForm {
  width: 200px;
}

.enter-email {
  width: 300px;
  /* what ever width you want */
  height: 20px;
  /* change the height if you want like this */
}

button {
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  padding: 8px;
}

.terms-conditions {
  font-size: 16px;
  /* change the size of the font */
}

<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div>
</br>

<label for="email"> Enter E-mail:</label>
<input class="enter-email" type="text" placeholder="Enter Email" name="email" required>
</br>
</br>

<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>

<input type="checkbox">
<span class="terms-conditions"> I agree to the terms and conditions 
    <a href="wwww.thisisawebsite.com">here</a>
   </span>
</input>

这对你有帮助。要更改文本的输入框，请在其上使用一个类并更改其属性(搜索除我显示的两个以外的更多内容)或者您可以完成 input[type=text] 来选择该文本输入，但如果您选择类，则更好有更多的文本输入，并希望它们有不同的样式。

至于条款和条件的变化文本，您可以将其包装在段落标签、标题标签中，就像我使用的 span 标签一样。然后再次给他们上课并更改字体大小。

另外正如评论中指出的那样，您不需要每次都指定字体系列，除非您希望在那里应用不同的字体。 body 中应用的所有文本属性都将赋予 body 中的所有文本，除非您为该文本指定其他内容。