一个简单的评论的列表，现只包含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，及时联系---------------------------------------------------------------------------------------------------------------------------------------------------
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
