HTML5留言板模板代碼
以下是一個簡單的HTML5留言板模板代碼。它使用了HTML5的新特性和一些基本的CSS樣式來創建一個美觀的留言板頁面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言板</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 0;
}
.main {
background-color: #fff;
border: 1px solid #ccc;
margin: 20px auto;
max-width: 600px;
padding: 20px;
}
h1 {
font-size: 28px;
margin: 0 0 20px;
text-align: center;
}
form {
margin-bottom: 20px;
}
input[type=text], textarea {
border: 1px solid #ccc;
font-size: 14px;
padding: 10px;
width: 100%;
}
input[type=submit] {
background-color: #4CAF50;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px;
width: 100%;
}
ul li {
border-bottom: 1px solid #ccc;
list-style-type: none;
margin: 0;
padding: 10px 0;
}
ul li:last-child {
border-bottom: none;
}
ul li p {
font-weight: bold;
margin: 0;
}
ul li small {
color: #999;
}
ul li span {
color: #666;
font-size: 12px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="main">
<h1>留言板</h1>
<form action="#" method="post">
<label for="name">姓名</label>
<input type="text" id="name" name="name" placeholder="請輸入您的姓名">
<label for="email">郵箱</label>
<input type="text" id="email" name="email" placeholder="請輸入您的郵箱">
<label for="message">留言</label>
<textarea id="message" name="message" placeholder="請輸入您的留言"></textarea>
<input type="submit" value="提交">
</form>
<ul>
<li>
<p>張三</p>
<small>zhangsan@example.com</small>
<br>
<p>這是一條留言</p>
<span>2021/11/11 11:11</span>
</li>
<li>
<p>李四</p>
<small>lisi@example.com</small>
<br>
<p>這是另一條留言</p>
<span>2021/11/12 12:12</span>
</li>
</ul>
</div>
</body>
</html>以上代碼包含一個主要的``容器，它包含了一個標題和一個表單用于提交留言。下面還有一個`
- `列表，它用于顯示已經提交的留言。
CSS樣式用于美化整個頁面，包括設置背景顏色、字體樣式、邊框、內邊距等等。表單中的輸入框和提交按鈕也經過了樣式的調整。
每條留言顯示在一個`
- `元素中，包括留言人的姓名和郵箱、留言內容以及留言時間戳。`
`和``元素用于設置文本的樣式，`
`用于換行，``用于設置時間戳的樣式。 通過修改CSS樣式和調整HTML標記，您可以根據自己的需要創建一個定制的留言板模板。
上一篇html5登入界面代碼
下一篇php修改css文件后綴