HTML留言板樣式代碼是前端開發的一個重要組成部分，它決定了留言板的外觀和交互效果。以下是一段簡單的HTML代碼，可以用來實現一個基本的留言板，其中包括文本輸入框、提交按鈕和顯示留言的區域。
<html> <head> <title>留言板</title> </head> <body> <h1>留言板</h1> <form> <label>姓名:</label> <input type="text" name="name"><br> <label>留言:</label> <textarea name="message"></textarea><br> <input type="submit" name="submit" value="提交"> </form> <ul id="messages"></ul> </body> </html>
以上代碼使用了<form>標簽來包含輸入框和提交按鈕，其中name屬性用來標識該表單元素，value屬性用來設置按鈕的文本。<label>標簽則用來關聯表單元素和其對應的說明文字。<textarea>標簽用來創建多行文本輸入框，其后面可以跟隨<br>標簽來設置換行。<ul>標簽用來創建一個無序列表，每個留言都可以使用<li>標簽作為列表項顯示出來。
為了更好的展示留言板，上述代碼可能需要進一步添加一些CSS樣式。下面是一些基本的CSS樣式代碼，可以用來讓留言板看起來更好看，更方便使用。
form {
margin: 20px;
padding: 10px;
border: 1px solid #ddd;
background: #f9f9f9;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"], textarea {
width: 100%;
font-size: 16px;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
}
input[type="submit"] {
display: block;
margin: 10px auto;
padding: 10px;
font-size: 16px;
border: none;
background: #0066cc;
color: #fff;
cursor: pointer;
}
ul#messages {
margin: 20px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
list-style: none;
}
ul#messages li {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
background: #f9f9f9;
}
ul#messages li h4 {
margin: 0;
font-size: 16px;
}
ul#messages li p {
margin: 5px 0 0;
}通過以上CSS樣式代碼，留言板將會變得更加美觀和易于使用。其中的關鍵CSS屬性包括margin、padding、border、background、list-style等，這些可以用來設置留言板的邊距、背景、邊框和列表樣式等。此外，利用偽類選擇器可以方便地對留言板中的不同元素進行樣式控制，使其更加清晰明了。
上一篇vue指令實例詳解
下一篇vue本地pdf預覽