現在的網頁設計已經不再局限于簡單的靜態頁面，一個好的設計需要考慮很多因素，其中之一就是用戶體驗。而讓用戶留言是與用戶交流的重要方式之一。下面我們就用CSS來設計一個漂亮的留言框來提高用戶的滿意度。

/* 留言框的基本樣式 */
.message-box{
width: 400px;
min-height: 100px;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
/* 留言者的姓名 */
.message-name{
font-size: 20px;
font-weight: bold;
}
/* 留言內容 */
.message-content{
font-size: 16px;
line-height: 1.5;
}
/* 留言時間 */
.message-time{
font-size: 12px;
color: #999;
text-align: right;
}
/* 留言框的標題 */
h1{
font-size: 24px;
margin-bottom: 10px;
}
/* 留言框的輸入框 */
.message-input{
width: 100%;
height: 60px;
padding: 10px;
border: 1px solid #ccc;
resize: none;
box-sizing: border-box;
margin-bottom: 10px;
}
/* 留言按鈕 */
.btn{
padding: 5px 10px;
background-color: #428bca;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
/* 清除浮動 */
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

首先，我們需要創建留言框的基本樣式。在這個樣式中，我們設置了留言框的寬度、最小高度、背景顏色和邊框等屬性。由于留言框可能會有多條留言，因此我們將這個樣式寫在一個 class 里，以便在頁面中復用。同時，我們還為留言的姓名、內容和時間設置了不同的樣式，以增強內容的可讀性。

接著，我們需要在頁面中添加留言框的標題和輸入框。在這里，我們給標題添加了一個 h1 標簽，并為輸入框設置了一個 class 為 message-input 的樣式。該樣式設置了輸入框的寬度、高度、邊框等屬性，并且為輸入框設置了一個不可縮放的屬性。

最后，我們還需要添加一個留言按鈕，讓用戶可以提交留言。我們為按鈕設置了一個 class 為 btn 的樣式，并在其中設置了按鈕的背景顏色、文字顏色和邊框半徑等屬性。為了解決可能出現的浮動問題，我們使用了 clearfix 這個 class。

通過以上樣式的設置，我們就成功地設計了一個簡單而漂亮的留言框。在實際應用中，我們還可以根據自己的需求進行修改和完善，以提高用戶的體驗。