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

＆＃13;

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 */
}

＆＃13;

<!--- 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>

＆＃13;

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

对于更改术语和条件的文本，您可以将其包含在段落标记，标题标记中以及我使用的span标记中。然后再给他们一个类并更改字体大小。

同样如评论中所指出的，除非您想要在其中应用不同的字体，否则您不需要每次都指定font-family。除非您为该文本指定了某些内容，否则在正文中应用的所有文本属性都将被赋予所有文本。

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

1 个答案: