评论框和评论列表的实现

最新推荐文章于 2024-06-16 00:47:57 发布
最新推荐文章于 2024-06-16 00:47:57 发布
阅读量1.1w 收藏 40
点赞数 9
分类专栏： 组件 文章标签： 评论列表 评论栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zeng__Yi/article/details/80387958
版权

一个简单的评论的列表，现只包含html和css。

界面图：

html部分：

 

 
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="pinglun.css">
    <style>
        .test{
            height: auto;
            margin: 0 15%;
        }
    </style>
</head>
<body>
<div class="test">
    <div lang="en-US" class="gitment-container gitment-editor-container">
        <div class="gitment-editor-main">
            <div class="gitment-editor-header">
                <nav class="gitment-editor-tabs">
                    <button class="gitment-editor-tab gitment-selected">编辑</button>
                </nav>
            </div>
            <div class="gitment-editor-body">
                <div class="gitment-editor-write-field">
                    <textarea placeholder="你想说些什么" title="Login to Comment"></textarea>
                </div>
                <div class="gitment-editor-preview-field gitment-hidden">
                    <div class="gitment-editor-preview gitment-markdown"></div>
                </div>
            </div>
        </div>
        <div class="gitment-editor-footer">
            <button class="gitment-editor-submit" title="Login to Comment">评论</button>
        </div>
    </div>
    <div lang="en-US" class="gitment-container gitment-comments-container">
        <ul class="gitment-comments-list">
            <li class="gitment-comment">
                <a class="gitment-comment-avatar">
                    <img class="gitment-comment-avatar-img" src="../images/default-avatar.png">
                </a>
                <div class="gitment-comment-main">
                    <div class="gitment-comment-header">
                        <a class="gitment-comment-name">
                            张三
                        </a>
                        <span>2018.05.17</span>

                        <div class="gitment-comment-like-btn">
                            <svg class="gitment-heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                                <path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"></path>
                            </svg>
                            22
                        </div>
                    </div>
                    <div class="gitment-comment-body gitment-markdown"><p>评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容</p></div>
                </div>
                </li>
            <li class="gitment-comment">
                <a class="gitment-comment-avatar">
                    <img class="gitment-comment-avatar-img" src="../images/default-avatar.png">
                </a>
                <div class="gitment-comment-main">
                    <div class="gitment-comment-header">
                        <a class="gitment-comment-name">
                            张三
                        </a>
                        <span>2018.05.17</span>

                        <div class="gitment-comment-like-btn">
                            <svg class="gitment-heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                                <path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"></path>
                            </svg>
                            22
                        </div>
                    </div>
                    <div class="gitment-comment-body gitment-markdown"><p>评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容</p></div>
                </div>
                </li>
            <li class="gitment-comment">
                <a class="gitment-comment-avatar">
                    <img class="gitment-comment-avatar-img" src="../images/default-avatar.png">
                </a>
                <div class="gitment-comment-main">
                    <div class="gitment-comment-header">
                        <a class="gitment-comment-name">
                            张三
                        </a>
                        <span>2018.05.17</span>

                        <div class="gitment-comment-like-btn">
                            <svg class="gitment-heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                                <path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"></path>
                            </svg>
                            22
                        </div>
                    </div>
                    <div class="gitment-comment-body gitment-markdown"><p>评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容
                        评论的内容评论的内容评论的内容评论的内容</p></div>
                </div>
                </li>
        </ul>
    </div>
</div>
</body>

css部分：

css的代码比较多所以就不放在这上面了，感觉需要用这个评论页面的可以下载。》》链接：https://pan.baidu.com/s/1amf5Etpf37TH03iO0b4lTA 密码：t4p6

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到问题：+WX：WAZJ-0508，及时联系---------------------------------------------------------------------------------------------------------------------------------------------------

Zeng__Y1
关注
  • 9
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
html评论列表页面模板,新闻列表优秀css+html模板
weixin_39702480的博客
06-03 1804
[css]代码库无标题文档*{padding:0; margin:0;}body{font-family:"宋体";}.news{width:98%; margin:0 auto; margin-bottom:5px;}.new_title{width:100%; height:25px; line-height:25px; padding-top:10px;background:#fafafa;...
评论列表模板 html代码,组件案例-评论列表.html
weixin_30827827的博客
06-08 1616
Document评论人： {{ item.user }}{{ item.content }}评论人：评论内容：var commentBox = {data() {return {user: '',content: ''}},template: '#tmpl',methods: {postComment() { // 发表评论的方法// 分析：发表评论的业务逻辑// 1. 评论数据存到哪里去？？？ ...
基于jQuery的网页版HTML带表情的评论框源码
03-16
基于jQuery的网页版HTML带表情的评论框源码
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整无限嵌套评论（超实用）轻松搞定贴吧嵌套评论功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手入门超简单
最新发布
南北极之间
06-16 530
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
移动端评论列表H5 C3 js
Mr_WangChao的博客
07-21 311
我本人曾在某大厂工作中遇到这个需求，网上找不到成品copy，干脆自己写了，当时用rem适配写的，还有一些点击阴影啥的，后来也没注意，再后来遇到一个简化版的需求，但是很急，就回过头来修修改改上了。有些简略，c3有很多冗余代码，将就着用吧。希望能帮到下一个搬砖工（手动狗头）基础的移动端评论列表，以像素为单位，带有文字头像，时间等内容。...
php H5问题回复系统,HTML5实现留言和回复的页面样式
weixin_36408867的博客
03-09 453
这篇文章主要介绍了用HTML5如何实现留言和回复样式,需要的朋友可以参考下具体就不做详细讲解了，直接上代码：web开发-webkfa.com*{margin:0;padding:0;-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */-webkit-text-size-adjus...
在Layui框架里设计一个评论列表的前端界面
stay hungry ! stay foolish!
03-15 1万+
在Layui框架里设计一个评论列表的前端界面 本想找个模板随便写个评论界面，结果找了大半天，木有找到，只能自己动手丰衣足食了。可以点击删除，点击加载更多也能拼接获取更多内容，只是写了个大概模拟逻辑的功能，用的时候还得再修改。 layui的图标，如何扩展第三方的图标：http://blog.csdn.net/guang_liang_/article/details/79160334   效果图：...
简易Vue评论框架的实现(父组件的实现)
08-28
该框架主要包括三个模块：用户输入模块、评论列表模块和分页模块。下面，我们将详细介绍每个模块的实现过程。 用户输入模块 在用户输入模块中，我们使用了一个名为 `UserDiv` 的组件，该组件负责接收用户的评论...
原生js实现回复评论功能
10-20
创建一个新的评论并添加到评论列表中，首先需要创建新的HTML结构，然后将其插入到适当的位置。例如： ```javascript function addReply(replyContent) { var newReply = document.createElement('div'); newReply....
android复制抖音评论框
03-15
在Android应用开发中，"复制抖音评论框"通常是指实现一个与抖音应用内评论框功能相似的组件。这个组件可能包含动态弹出、输入框、表情选择、以及复制评论等功能。我们将围绕这一主题，深入探讨如何在Android项目中...
bootstrap + wangEditor版评论框+评论列表
03-02
在本项目中，Bootstrap v3.3.0 版本被用于设计和实现评论框和评论列表。这个版本的 Bootstrap 提供了栅格系统，允许开发者轻松地创建适应不同屏幕尺寸的布局。同时，Bootstrap 的组件如按钮、表单、下拉菜单等，都...
bootstrap评论列表模板
08-27
8. **示例代码**：在“bootstrap评论列表静态模板”文件中，可能包含HTML文件（展示模板结构）、CSS文件（定义样式）和JavaScript文件（实现交互功能）。开发者可以通过查看和学习这些代码，了解如何在自己的项目中...
在html中加入评论,CSS 实现评论楼层
weixin_42361133的博客
06-02 826
评论楼层是很早就有的一个功能了，最早是研究出来的已经不可考，我今天带来的方法是几乎使用纯CSS来实现评论楼层。为什么说是几乎呢，因为CSS不能进行数学运算，所以当开启评论分页的时候我们需要一些辅助黑科技来实现“CSS 实现评论楼层”。实现原理主要是使用了CSS计数器counter-increment和counter-reset，本文重点并不是介绍这两个属性，所以就不做详细介绍了。利用CSS计数器再...
在html页面添加了评论和回复的显示页面
热门推荐
stay hungry ! stay foolish!
03-23 3万+
在html页面添加了评论和回复的显示页面 先来看看效果图，用了Layui的框架，图片查看用了layui的photos,这功能很赞。 源码如下： <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8...
HTML模拟评论系统
Python狂MC小豆的博客
03-05 635
钻研学习了1天，做了这个： 点击输入框可以输文字 点击提交后弹出窗口并刷新 代码如下： <!DOCTYPE html> <html> <head> <!--网页名显示--> <title>html模拟评论系统</title> <!--文字显示--> <h5>模拟评论系统（没有储存评论的库，...
html实现添加评论和删除评论的功能
weixin_43728903的博客
12-27 6899
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table width="800" border="1" align="cente...
网页实现的评论功能的代码
Strangewu的博客
10-17 1万+
实现一个评论功能的页面并能通过验证码验证 效果展示1 效果展示2 效果展示3 效果展示4 内容 名字 描述 主页面展示 main.html 文章部分与评论部分整体 主页面css main.css 修饰整个页面整体部分 评论功能整体CSS commentStyle.css 评论区大小，所处的位置等 评论后展示出来的CSS getSQLcomment.css 评论展示出来内容的位置，等 写评论过程中的js check,js 从六个中的一个头像，或网名随机产生一个，以及点击
html设计一个网页，有留言板能实时显示留言，有时间戳，有小游戏
weixin_35752645的博客
01-03 1019
好的，我来为你设计一个网页。首先，我们需要在HTML中创建一个表单，其中包含一个文本区域，用户可以在其中输入留言，以及一个提交按钮，用户可以点击提交按钮来发布留言。然后我们需要使用JavaScript来处理表单提交事件，将留言添加到留言板中，并显示当前时间戳。 具体来说，你可以使用HTML的<form>元素来创建一个表单，使用<textarea>元素来创建一个文本区域，使用...
在html中添加评论,让评论模块支持更多 HTML 标签
weixin_33788825的博客
06-09 798
WordPress 原生的评论模块内容，支持使用 HTML 标签来增强评论内容的格式和效果。但是这肯定会带来一些安全隐患，特别是评论这种随便一个浏览者都可以提交数据的地方，容易产生跨站攻击(XSS)，所以 WordPress 系统严格的限制了评论模块可以使用的 HTML 标签。默认的情况下，只支持：a、abbr、acronym、b、blockquote、cite、code、del、em、i、q、s...
使用uniapp实现抖音评论框
09-28
要使用uniapp实现抖音评论框，你可以按照以下步骤操作： 1. 在uniapp项目中创建一个评论框的组件，可以使用 `<input>` 或 `<textarea>` 元素来实现用户输入评论的功能。 2. 在评论框组件中，监听用户输入的评论内容，可以使用 `v-model` 或 `@input` 来绑定用户输入的值。 3. 添加一个提交按钮或者发送按钮，当用户点击该按钮时，获取用户输入的评论内容并进行处理。你可以使用 `@click` 事件来监听按钮的点击事件，然后调用相应的方法。 4. 在处理评论内容的方法中，你可以进行一些逻辑判断，例如检查评论是否为空或者是否超出了字数限制等。如果有必要，你还可以进行字符串处理，例如去除首尾空格等。 5. 处理完评论内容后，你可以将评论内容发送给后端服务器进行保存或者提交。你可以使用uniapp提供的 `uni.request` 方法或者其他HTTP请求库来发送POST请求。 6. 在成功提交评论后，根据需求更新UI界面，例如显示评论成功的提示消息或者刷新评论列表等。 7. 在组件中，你还可以添加其他相关功能，例如显示剩余字数、添加表情等。 下面是实现抖音评论框的一些示例代码： ```html <template> <div> <textarea v-model="comment" placeholder="请输入评论内容"></textarea> <button @click="submitComment">提交</button> </div> </template> <script> export default { data() { return { comment: '' } }, methods: { submitComment() { if (this.comment.trim() === '') { // 评论不能为空 return; } if (this.comment.length > 200) { // 评论字数不能超过200字 return; } // 发送评论到后端服务器 // 使用uni.request或其他HTTP请求库发送POST请求 } } } </script> ```
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zeng__Y1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值