CÁCH THỨC - Bản tin Email
Tìm hiểu cách tạo bản tin email bằng CSS.
Theo dõi bản tin của chúng tôi
Văn bản Lorem ipsum về lý do tại sao bạn nên đăng ký blabla bản tin của chúng tôi. Văn bản Lorem ipsum về lý do tại sao bạn nên đăng ký blabla bản tin của chúng tôi. Văn bản Lorem ipsum về lý do tại sao bạn nên đăng ký blabla bản tin của chúng tôi.
Cách tạo bản tin
Bước 1) Thêm HTML
Sử dụng phần tử <form> để xử lý đầu vào. Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn PHP của chúng tôi . Sau đó, thêm đầu vào cho từng trường, cùng với nút "gửi":
Thí dụ
<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>
Bước 2) Thêm CSS:
Thí dụ
/* Style the form element with a border
around it */
form {
border: 4px solid #f1f1f1;
}
/* Add some padding and a grey background color to containers */
.container {
padding: 20px;
background-color: #f1f1f1;
}
/* Style the input elements and the
submit button */
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Add margins to the checkbox */
input[type=checkbox] {
margin-top: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
Mẹo: Đi tới Hướng dẫn về Biểu mẫu HTML của chúng tôi để tìm hiểu thêm về Biểu mẫu HTML.
Mẹo: Đi tới Hướng dẫn biểu mẫu CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các phần tử biểu mẫu.