评论框和评论列表的实现

最新推荐文章于 2021-06-08 14:56:52 发布

Zeng__Y1

最新推荐文章于 2021-06-08 14:56:52 发布

阅读量1.2w

点赞数 9

CC 4.0 BY-SA版权

分类专栏：组件文章标签：评论列表评论栏

本文链接：https://blog.youkuaiyun.com/Zeng__Yi/article/details/80387958

组件专栏收录该内容

4 篇文章

订阅专栏

一个简单的评论的列表，现只包含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，及时联系---------------------------------------------------------------------------------------------------------------------------------------------------