网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>评论</title>
<link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css">
<script type="text/javascript" src="js/jquery3.3.1.js"></script>
<script type="text/javascript" src="semantic-ui/semantic/dist/semantic.min.js"></script>
</head>
<body>
<div class="ui container">
<h2>基本的评论</h2>
<div class="ui comments">
<div class="comment">
<a rel="nofollow" href="" class="avatar">
<img src="imgs/lyl.jpg" alt="">
</a>
<div class="content">
<a rel="nofollow" href="" class="author">梁云亮</a>
<div class="metadata">
<div class="date">3 分钟之前</div>
<div class="rating">
<i class="star icon"></i> 5
</div>
</div>
<div class="text">这篇博客写的不错，从中学到了很多东西！</div>
<div class="actions">
<a rel="nofollow" href="">回复</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>效果
带有回复的评论
实现带有回复的评论比较简单，只需要在某一条评论最后加上一个comments就行了，比如下面代码的结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>评论</title>
<link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css">
<script type="text/javascript" src="js/jquery3.3.1.js"></script>
<script type="text/javascript" src="semantic-ui/semantic/dist/semantic.min.js"></script>
</head>
<body>
<div class="ui container">
<h2>带有回复的评论</h2>
<div class="ui minimal threaded comments">
<div class="comment">
<a rel="nofollow" href="" class="avatar">
<img src="imgs/lyl.jpg" alt="">
</a>
<div class="content">
<a rel="nofollow" href="" class="author">梁云亮</a>
<div class="metadata">
<div class="date">3 分钟之前</div>
<div class="rating">
<i class="star icon"></i> 5
</div>
</div>
<div class="text">这篇博客写的不错，从中学到了很多东西！</div>
<div class="actions">
<a rel="nofollow" href="">回复</a>
</div>
</div>
<div class="comments">
<div class="ui comments">
<div class="comment">
<a rel="nofollow" href="" class="avatar">
<img src="imgs/lyl.jpg" alt="">
</a>
<div class="content">
<a rel="nofollow" href="" class="author">梁云亮</a>
<div class="metadata">
<div class="date">3 分钟之前</div>
<div class="rating">
<i class="star icon"></i> 5
</div>
</div>
<div class="text">这篇博客写的不错，从中学到了很多东西！</div>
<div class="actions">
<a rel="nofollow" href="">回复</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a rel="nofollow" href="" class="avatar">
<img src="imgs/lyl.jpg" alt="">
</a>
<div class="content">
<a rel="nofollow" href="" class="author">梁云亮</a>
<div class="metadata">
<div class="date">3 分钟之前</div>
<div class="rating">
<i class="star icon"></i> 5
</div>
</div>
<div class="text">这篇博客写的不错，从中学到了很多东西！</div>
<div class="actions">
<a rel="nofollow" href="">回复</a>
</div>
</div>
</div>
</div>
<form action="#" class="ui reply form">
<div class="field">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<button class="ui primary submit labeled icon button">
添加评论
</button>
</form>
</div>
</body>
</html>效果：
