資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會研究
時尚研究
法律研究如何使用 CSS 建立電子郵件時事通訊？
一個表單包含訂閱電子郵件時事通訊的詳細資訊，包括姓名和電子郵件地址輸入欄位。有了它，還可以為使用者建立訂閱每日時事通訊的複選框。此外，還可以看到訂閱時事通訊的按鈕。我們將在本文中介紹如何使用 HTML 和 CSS 設計電子郵件時事通訊表單。
建立一個表單並設定輸入欄位
使用 <form> 建立一個表單。姓名、電子郵件地址和複選框欄位設定在表單中。此外，提交按鈕也設定在表單內 −
<form>
<h2>Subscribe to our Newsletter</h2>
<p>Subscribe to our Newsletter to get latest update in the world of technology and web</p>
<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>
<input type="submit" value="Subscribe">
</form>
像這樣設定表單樣式。最大寬度使用 max-width 屬性設定 −
form {
border: 3px solid #f1f1f1;
padding: 20px;
background-color: #f3f3f3;
max-width: 800px;
margin:auto;
}
設定輸入欄位樣式
輸入欄位文字和按鈕的樣式像這樣設定。寬度設定為 100%，顯示屬性設定為行內塊 −
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
複選框
用於每日時事通訊功能的複選框使用 input type checkbox 建立 −
<label> <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter </label>
示例
以下是使用 CSS 建立電子郵件簡報的程式碼 −
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;}
h1{
text-align: center;
}
form {
border: 3px solid #f1f1f1;
padding: 20px;
background-color: #f3f3f3;
max-width: 800px;
margin:auto;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: rgb(236, 255, 61);
color: rgb(0, 0, 0);
border: none;
font-size: 25px;
font-weight: bolder;
}
input[type=submit]:hover {
background-color: rgb(255, 238, 0);
}
</style>
<body>
<h1>Email Newsletter Example</h1>
<form>
<h2>Subscribe to our Newsletter</h2>
<p>Subscribe to our Newsletter to get latest update in the world of technology and web</p>
<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>
<input type="submit" value="Subscribe">
</form>
</body>
</html>
更新於： 14-12-2023
151 次瀏覽
廣告