CSS代码写一个网页,有留言板
时间: 2024-04-29 14:25:18 浏览: 73
可以这样写 CSS 代码来创建一个留言板:
```css
/* 定义留言板的外观 */
.message-board {
width: 500px;
height: 400px;
background-color: #fff;
border: 1px solid #ccc;
margin: 0 auto;
}
/* 定义留言板的标题 */
.message-board-title {
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
/* 定义留言板的留言列表 */
.message-list {
list-style: none;
padding: 0;
margin: 0;
}
/* 定义留言板的每一条留言 */
.message {
padding: 10px;
border-bottom: 1px solid #ccc;
}
/* 定义留言板的留言作者 */
.message-author {
font-weight: bold;
}
/* 定义留言板的留言内容 */
.message-content {
margin-top: 5px;
}
/* 定义留言板的留言日期 */
.message-date {
font-size: 12px;
color: #999;
margin-top: 5px;
}
```
然后你就可以在 HTML 代码中使用这些类来创建留言板的布局和外观了。例如:
```html
<div class="message-board">
<div class="message-board-title">留言板</div>
<ul class="message-list">
<li class="message">
<div class="message-author">张三</div>
<div class="message-content">我喜欢这个留言板!</div>
<div class="message-date">2022-01-01</div>
</li>
<li class="message">
<div class="message-author">李四</div>
<div class="message-content">我也喜欢!</div>
<div class="message-date">2022-01-02</div>
</li>
</ul>
</div>
```
阅读全文