如何創建：電子郵件通訊

學習如何用 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：

使用 <form> 元素來處理輸入。您可以在我們的 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 表單