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

/* 留言框的基本樣式 */
.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;
}
/* 留言內(nèi)容 */
.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;
}

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

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

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

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