在Layui框架⾥设计⼀个评论列表的前端界⾯在Layui框架⾥设计⼀个评论列表的前端界⾯
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>评论列表页⾯</title>
<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">
</head>
<style type="text/css">
ment_list {
padding-top:40px;
width:700px;
margin:0 auto;
}
ment_details {
float:left;
}
ment_content {
margin-top:10px;
font-size:16px;
}
.
comment_add_or_last {
margin:0 auto;
clear: both;
width:600px;
height:40px;
background: #F0F0F0;
text-align: center;
line-height: 40px;  //⾏⾼（与div保持同⾼，垂直居中写法）
}
.imgdiv{
float:left;
}
.imgcss {
width:50px;
height:50px;
border-radius: 50%;
}
ment_name {
margin-left:10px;
color:#3D9EEA;
font-size:15px;
前端ui框架是什么意思font-weight: bolder;
}
.layui-icon {
font-size: 10px;
color: grey;
}
.del {
margin-left: 55px;
}
}
</style>
<body >
<div class="comment_list">
<h2 >全部评论</h2>
<hr>
<div class="comment">
<div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div>
<div class="conmment_details">
<span class="comment_name">⼤⽩ </span>    <span>22分钟前</span>
<div class="comment_content" >  感觉林丹越来越帅了，好棒</div>
<div class="del"> <i class="icon layui-icon"  > 赞(164)</i>
<a class="del_comment" data-id="1"> <i class="icon layui-icon" > 删除</i></a>  </div>
</div>
<hr>
</div>
<div class="comment">
<div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div>
<div class="conmment_details">
<span class="comment_name">⼤⽩ </span>    <span>22分钟前</span>
<div class="comment_content" >  感觉林丹越来越帅了，好棒</div>
<div class="del"> <i class="icon layui-icon"  > 赞(164)</i>
<a class="del_comment" data-id="1"> <i class="icon layui-icon" > 删除</i></a>  </div>
</div>
<hr>
</div>
<div class="comment">
<div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div>
<div class="conmment_details">
<span class="comment_name">⼤⽩ </span>    <span>22分钟前</span>
<div class="comment_content" >  感觉林丹越来越帅了，好棒</div>
<div class="del"> <i class="icon layui-icon"  > 赞(164)</i>
<a class="del_comment" data-id="1"> <i class="icon layui-icon" > 删除</i></a>  </div>
</div>
<hr>
</div>
</div>
<div class="comment_add_or_last" >
没有更多评论了
</div>
</body>
<script type="text/javascript" src="common/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form','layer','jquery','element','laypage','form'],function(){
var form = layui.form();
window.layer = layui.layer;
layedit = layui.layedit;
window.jQuery = window.$ = layui.jquery;
var element = layui.element(),
form = layui.form(),
laypage = layui.laypage;
//删除⽤户
$(document).on('click', '.del_comment', function() {
var id = $(this).attr("data-id");
alert(typeof id);
$(this).closest('ment').css("display", "none");
});
$(document).on('click', 'ment_add_or_last', function() {
add();
$(this).html( "点击加载更多");
});
function  delComment(id) {
alert(id);
}
function  add() {
var s = " ";
s += '<div class="comment">';
s += '<div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div>';
s += '<div class="conmment_details">';
s +=  '<span class="comment_name">⼤⽩ </span>    <span>22分钟前</span>';
s +=  '<div class="comment_content" >  感觉林丹越来越帅了，好棒</div>';
s +=  '<div class="del"> <i class="icon layui-icon"  > 赞(164)</i>';
s +=  '<a class="del_comment"  data-id="1"><i class="icon layui-icon" > 删除</i></a></div></div><hr></div>';  $('ment_list').append(s);
}
});
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。