如何创建：电子邮件通讯

学习如何用 CSS 创建电子邮件通讯。

订阅我们的新闻通讯

Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.

亲自试一试

如何创建新闻通讯

第一步 - 添加 HTML：

使用

元素来处理输入。您可以在我们的 PHP 教程中了解更多相关信息。

然后为每个字段添加输入控件以及“提交”按钮：

<form action="action_page.php">
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="Name" name="name" required>
    <input type="text" placeholder="Email address" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
</form>

第二步 - 添加 CSS：

/* 为表单元素设置样式，使其周围带有边框 */
form {
  border: 4px solid #f1f1f1;
}
/* 为容器添加一些内边距和灰色背景色 */
.container {
  padding: 20px;
  background-color: #f1f1f1;
}
/* 设置输入元素和提交按钮的样式 */
input[type=text], input[type=submit] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* 为复选框添加外边距 */
input[type=checkbox] {
  margin-top: 16px;
}
/* 设置提交按钮的样式 */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  border: none;
}
input[type=submit]:hover {
  opacity: 0.8;
}

亲自试一试

相关页面

教程：HTML 表单

教程：CSS 表单