Cách thực hiện - 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 bạn nên đăng ký nhận bản tin blabla của chúng tôi. Văn bản Lorem ipsum về lý do bạn nên đăng ký nhận bản tin blabla của chúng tôi. Văn bản Lorem ipsum về lý do bạn nên đăng ký nhận bản tin blabla của chúng tôi.
Cách tạo một bản tin
Bước 1) Thêm HTML
Sử dụng phần tử <form> để xử lý dữ liệu đầ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 thông tin đầu vào cho từng trường cùng với nút "gửi":
Ví 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:
Ví 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;
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn 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: Hãy truy cập 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.