Cách tạo: Bản tin email
- Trang trước Biểu mẫu có biểu tượng
- Trang tiếp theo Biểu mẫu đ堆叠
Học cách tạo bản tin email bằng CSS.
Đăng ký bản tin tin tức của chúng tôi
Lorem ipsum text về lý do bạn nên đăng ký bản tin của chúng tôi blabla. Lorem ipsum text về lý do bạn nên đăng ký bản tin của chúng tôi blabla. Lorem ipsum text về lý do bạn nên đăng ký bản tin của chúng tôi blabla.
Cách tạo bản tin tin tức
Bước 1 - Thêm HTML:
Sau đó thêm các điều khiển đầu vào và nút
<form action="action_page.php">
<div class="container">
<h2>Đăng ký nhận tin tức của chúng tôi</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Tên" name="name" required>
<input type="text" placeholder="Địa chỉ email" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Tin tức hàng ngày
</label>
</div>
<div class="container">
<input type="submit" value="Subscribe">
</div>
</form>
Bước 2 - Thêm 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;
}
Trang liên quan
Giáo trình:HTML biểu mẫu
Giáo trình:CSS biểu mẫu
- Trang trước Biểu mẫu có biểu tượng
- Trang tiếp theo Biểu mẫu đ堆叠
