如何製作 - 電子郵件通訊
瞭解如何使用 CSS 建立電子郵件通訊。
訂閱我們的通訊
在這裡輸入文字，說明為什麼您應該訂閱我們的通訊，等等。在這裡輸入文字，說明為什麼您應該訂閱我們的通訊，等等。在這裡輸入文字，說明為什麼您應該訂閱我們的通訊，等等。
如何建立新聞通訊
步驟 1) 新增 HTML
使用 <form> 元素來處理輸入。您可以在我們的 PHP 教程中瞭解更多關於此資訊。然後為每個欄位新增輸入項，以及一個“提交”按鈕。
示例
<form action="action_page.php">
<div class="container">
<h2>訂閱我們的通訊</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="姓名" name="name" required>
<input type="text" placeholder="電子郵件地址" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> 每日通訊
</label>
</div>
<div class="container">
<input type="submit" value="訂閱">
</div>
</form>
步驟 2) 新增 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 表單教程 瞭解更多關於 HTML 表單的資訊。
提示：前往我們的 CSS 表單教程 瞭解更多關於如何設定表單元素樣式的資訊。
