如何创建 - 电子邮件通讯
了解如何使用 CSS 创建电子邮件通讯。
Subscribe to our Newsletter
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.
如何创建新闻简报
步骤 1) 添加 HTML:
使用 <form> 元素来处理输入。 您可以在我们的 PHP 教程中了解更多信息。 然后为每个字段添加 inputs 以及 submit 按钮:
实例
<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>
步骤 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: #4CAF50;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
亲自试一试 »
提示:转到我们的HTML 表单教程，了解有关 HTML 表单的更多信息。
提示:请转到我们的CSS 表单教程，了解有关如何设置表单元素样式的更多信息。
