隨著社交媒體的普及，越來越多的網站都提供了留言功能，讓用戶可以方便地發表自己的意見和建議。下面，我們就來一起學習如何用CSS來制作一個簡單的留言界面。

/*留言框樣式*/
.message-box {
background-color: #F1F1F1;
border: 2px solid #ddd;
padding: 10px;
margin: 10px 0px;
}
/*表單樣式*/
.form-style {
width: 100%;
max-width: 400px;
margin: 0px auto;
}
.form-style label,
.form-style input,
.form-style textarea {
display: block;
width: 100%;
padding: 10px;
border: none;
margin-bottom: 10px;
}
.form-style input:focus,
.form-style textarea:focus {
outline: none;
box-shadow: 0px 0px 5px #ddd;
}
.form-style button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
cursor: pointer;
float: right;
}
.form-style button:hover {
background-color: #3e8e41;
}
/*留言列表樣式*/
.message-list {
list-style-type: none;
padding: 10px;
}
.message-list li {
background-color: white;
border: 2px solid #ddd;
margin: 10px 0px;
padding: 10px;
}
.message-list li .date {
float: right;
color: #aaa;
}

以上就是CSS代碼部分的樣式。其中，.message-box是留言框的樣式，.form-style是留言表單的樣式，.message-list是留言列表的樣式。

接下來，我們來看看HTML代碼的實現：

<div class="message-box">
<form class="form-style">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email" required>
<label for="message">留言：</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">提交</button>
</form>
<ul class="message-list">
<li>
<p>這是一條留言的內容。</p>
<p class="date">2022-08-08</p>
</li>
</ul>
</div>

以上就是HTML代碼的實現，根據需要可以自行修改。最后，我們就可以看到自己制作的簡單留言界面了！