css设计评论留言板

 时间:2026-02-15 01:32:18

1、首先写div容器,放一个h3标题,写上文字,加上一张星星图片(这里只演示 css,所以用一张图片代替):

css设计评论留言板

css设计评论留言板

2、添加内容区,因为是可以写多行文字,所以使用textarea标签:

css设计评论留言板

css设计评论留言板

3、添加提交按钮,这里使用input标签,类型为图片,所以选择一张图片即可:

css设计评论留言板

4、给评论区加上宽度为600px,边框颜色为灰色,上下边距为50px,左右水平居中,内边距为40px,如下图所示:

css设计评论留言板

css设计评论留言板

5、给textarea设置高度,内边距为10px,让图片按钮跟上边距离为20px:

css设计评论留言板

6、最后提供完整的代码演示:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

 padding: 0;

 margin: 0;

}

.comment{

 width: 600px;

 border: 1px solid gray;

 margin: 50px auto;

 padding: 40px 40px;

}

.comment h3 span{

 color: red;

}

.comment textarea{

 height: 130px;

 padding: 10px;

 width: 580px;

}

.comment input[type=image]{

  margin-top: 20px;

}

</style>

</head>

<body>

<div class="comment">

<h3>评论<img  src="../img/star.png"/><span>我要评论</span></h3>

   <textarea placeholder="请输入你的意见和建议"></textarea>

   <input type="image" src="../img/btn.png" />

</div>

</body>

</html>

  • CSS中行内、内部、外部三种样式的写法介绍
  • css如何通过实现让文字在框内水平垂直都居中?
  • 如何在HTML中插入图片
  • HTML怎么实现网页跳转
  • 静态网页跟动态网页有什么区别
  • 热门搜索
    泰国旅游网 黄冈旅游网 无锡有哪些旅游景点 国庆旅游团购 中国旅游论坛 飘邈之旅游戏 海南旅游购物 环视旅游网 新疆自治区旅游局 百里峡旅游