在網頁設計中，CSS布局是必不可少的一部分。而div元素則是實現網頁布局的核心元素之一。在此，我們來探討一種基于div元素的留言板布局。

首先，我們需要創建一個div元素，并設置其樣式，使其成為我們留言板的容器：

<style>
.container {
width: 600px;
margin: 0 auto;
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}
</style>
<div class="container"></div>

以上代碼中，我們設置了容器的寬度為 600px，并使其居中顯示；背景顏色為淡灰色；內邊距為 20px；邊框角半徑為 10px。

接下來，讓我們在容器中添加留言板各個元素：

<style>
/* 容器樣式 */
.container {
width: 600px;
margin: 0 auto;
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}
/* 留言板標題樣式 */
.title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
/* 用戶信息輸入框 */
.input-info {
margin-bottom: 20px;
}
/* 留言內容輸入框 */
.input-content {
margin-bottom: 20px;
}
/* 提交按鈕 */
.btn-submit {
display: block;
width: 100px;
margin: 0 auto;
background-color: #333333;
color: #ffffff;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
</style>
<div class="container">
<div class="title">留言板</div>
<div class="input-info">
姓名：<input type="text" />    
郵箱：<input type="text" />
</div>
<div class="input-content">
留言：<br />
<textarea rows="10" cols="60"></textarea>
</div>
<button class="btn-submit">提交</button>
</div>

以上代碼中，我們添加了留言板標題<div class="title">；用戶信息輸入框<div class="input-info">；留言內容輸入框<div class="input-content">；提交按鈕<button class="btn-submit">。并為它們分別設置了相應的樣式。

最終，我們的留言板布局就完成了。可以根據需求添加其他元素或調整樣式以達到更好的用戶體驗。