HTML留言板是一个简单的Web应用程序，用户可以在网页上留言、评论或反馈。在HTML页面上创建这样一个应用程序，就需要使用一些HTML代码和样式。下面是一些常用的HTML留言板样式代码：

1.基本样式

/* 清除默认样式 */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/* 外层容器 */
.container{
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* 留言框 */
.message-box{
margin-top: 20px;
}
.message-box textarea{
width: 100%;
padding: 10px;
font-size: 16px;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
outline: none;
}
/* 按钮 */
button{
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
color: #fff;
background-color: #009688;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
/* 列表 */
ul{
margin-top: 20px;
list-style: none;
}
li{
padding: 10px;
margin-bottom: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}

2.添加动态效果

/* 给留言框和按钮添加动画效果 */
.message-box textarea,
button{
transition: all 0.3s ease-in-out;
}
/* 鼠标悬停状态 */
.button:hover{
background-color: #00796b;
}
/* 留言框获得焦点 */
.message-box textarea:focus{
border-color: #009688;
box-shadow: 0px 0px 5px #009688;
}
/* 列表项悬停状态 */
li:hover{
background-color: #f5f5f5;
}

3.实现响应式布局

/* 在小屏幕上自适应 */
@media (max-width: 768px){
.container{
width: 100%;
padding: 10px;
}
.message-box textarea{
font-size: 14px;
}
li{
font-size: 14px;
}
}

以上是一个基本的HTML留言板样式代码。可以根据实际需求进行修改和扩展。