在现代网页设计中,一个小巧精致的留言板非常重要。利用CSS,我们可以很容易地制作出一个小型留言板,让用户能够轻松快捷地发表意见和建议。首先,我们需要定义一个最外层的容器div,命名为“message-
.message-board { width: 600px; border: 1px solid #ddd; background-color: #f8f8f8; padding: 20px; }
.message { margin-bottom: 20px; padding: 10px; background-color: #fff; border: 1px solid #ddd; } .avatar { float: left; margin-right: 10px; } .username { font-weight: bold; font-size: 16px; color: #333; } .content { margin-top: 10px; color: #666; } .time { margin-top: 10px; font-size: 12px; color: #999; text-align: right; }
<div class="message-board"> <div class="message"> <img src="avatar.jpg" class="avatar"> <div> <div class="username">用户A</div> <div class="content">这里是留言内容</div> <div class="time">2022/11/11 11:11:11</div> </div> </div> <div class="message"> <img src="avatar.jpg" class="avatar"> <div> <div class="username">用户B</div> <div class="content">这里是留言内容</div> <div class="time">2022/11/11 11:11:11</div> </div> </div> <!-- 此处省略若干留言 --> </div>
粉丝
0
关注
0
收藏
0