在html页面添加了评论和回复的显示页面
2024-06-14 10:32:29
在html页面添加了评论和回复的显示页面
先来看看效果图，用了Layui的框架，图片查看用了layui的photos,这功能很赞。
源码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>挑选电子书制作工具</title> <link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all"><link rel="stylesheet" type="text/css" href="common/bootstrap/css/bootstrap.css" media="all"><link rel="stylesheet" type="text/css" href="common/global.css" media="all"><link rel="stylesheet" type="text/css" href="css/personal.css" media="all">
<style type="text/css">
.article-container{background-color: #ffffff;padding-top:20px;width:1024px;margin:20px auto;}.article_r{padding-top:10px;float:right;}.pulisher,.time,.article_view,.article_comments,.article_del{clear:both;margin-right:25px;font-size: 15px;}.title{font-weight:bold;font-size: 30px;text-align: center;}.article_content{background: #ffffff;clear:both;padding:1em 4em;margin-top: 40px;}p{text-indent: 2em;text-overflow: hidden;font-size:18px;}/*话题内容图片*/.ImgContent{ width:350px;margin:0px auto; padding: 5px; overflow:hidden; } .NavLinks{ padding:5px; width:100px;height: 100px;float: left; overflow: hidden;
} .NavLinks img{ width: 100%; height: 100%;
}
.hitShowPic {
width:350px;
clear:both;
margin-left:430px;
}
.hitShowPic span {font-size: 15px;text-align: center;
}/*以下评论的css*/.show_reply_list {margin-right:1em;color: grey;}.comment_list {background-color: #ffffff;padding-top:5px;width:900px;margin:0 auto;}.comment {width:900px;margin-top:10px;}.comment_details {float:right;}.comment_content {clear:both;margin:5px 50px;font-size:16px;}.comment_add_or_last {margin:0 auto;clear: both;width:600px;height:50px;background: #F0F0F0;text-align: center;font-size:20px;line-height: 40px; //行高（与div保持同高，垂直居中写法）margin-bottom: 40px;}.imgdiv{width:80px;height:70px;float:left;}.imgcss {width:60px;height:60px;border-radius: 50%;}.comment_name { margin-left:10px;color:#3D9EEA;font-size:16px;font-weight: bolder;}.layui-icon {font-size: 13px; color: grey;}.del {float:right;}.del_comment {margin-right:50px;}.reply_list {clear:both;display:none;width:900px;padding-right:15px;margin-top:10px;font-size:16px;}.reply {clear:both;width:700px;margin:4px auto;}.reply_name {color:#3D9EEA;}.del_reply {float:right;}.show_remain_reply {width:600px;height:40px;text-align:center;font-size:18px; background-color: #F0F0F0;margin:0 auto;line-height: 40px;display:none;}
</style></head>
<body> <div class="article-container"><div class="article_head"><h1 class="title">标题标题标题标题</h1><div class="article_r"><span class="pulisher">小白 发表</span><span class="time"> 2015:10:10</span><span class="article_view" title="阅读"> 阅读(100)</span><span class="article_comments" title="评论"> <a href="#" onclick=""> 评论</a>(100)</span><span class="article_del" data-id="${articleDto.id}"><a href="javascript:void(0);" onclick="" title="删除">删除</a></span> </div> </div><div class="article_content"><p> 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容</p></div><hr/><div class="ImgContent layer-photos-demo" id="layer-photos-demo" > <div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg" alt="图片名图片名图片名"> </div> <div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/user.jpg"> </div> <div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg"> </div> <div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/user.jpg"> </div><div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg"> </div> <div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/user.jpg"> </div> <div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg"> </div> <div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/user.jpg"> </div><div class="NavLinks"> <img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg"> </div> </div> <div class="hitShowPic" >点击图片查看原图</span></div><hr><div class="comment_list"><h3 style="text-indent: 2em;">评论列表</h3><hr><div class="comment"><div class="imgdiv"><img class="imgcss" src="./images/user.jpg"/></div><div class="conmment_details"><div style="float:left;"><span class="comment_name">大白 </span> <span>22分钟前</span></div><div class="del"><span class="show_reply_list">查看回复</span><i class="icon layui-icon" >赞(164)</i><a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a> </div><div class="comment_content" > 感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒</div></div><div class="reply_list" > <!--style="display:none;"--><div class="reply" ><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon " > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> </div><div class="show_remain_reply">查看剩下的回复</div><!--回复列表结束--></div> <hr><div class="comment"><div class="imgdiv"><img class="imgcss" src="./images/user.jpg"/></div><div class="conmment_details"><div style="float:left;"><span class="comment_name">大白 </span> <span>22分钟前</span></div><div class="del"><span class="show_reply_list">查看回复</span><i class="icon layui-icon" >赞(164)</i><a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a> </div><div class="comment_content" > 感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒</div></div><div class="reply_list" > <!--style="display:none;"--><div class="reply" ><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon " > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> </div><div class="show_remain_reply">查看剩下的回复</div><!--回复列表结束--></div> <hr><div class="comment"><div class="imgdiv"><img class="imgcss" src="./images/user.jpg"/></div><div class="conmment_details"><div style="float:left;"><span class="comment_name">大白 </span> <span>22分钟前</span></div><div class="del"><span class="show_reply_list">查看回复</span><i class="icon layui-icon" >赞(164)</i><a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a> </div><div class="comment_content" > 感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒</div></div><div class="reply_list" > <!--style="display:none;"--><div class="reply" ><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon " > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> <div class="reply"><span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span> <a data-id="1" class="del_reply"> <i class="icon layui-icon" > 删除</i></a> </div> </div><div class="show_remain_reply">查看剩下的回复</div><!--回复列表结束--></div> <hr><div class="comment_add_or_last" >点击加载更多评论</div> <hr></div></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(); layer.photos({photos: '#layer-photos-demo',anim: 5}); $(document).ready(function(){//alert($(".comment_list").find(".comment")[0] == undefined);if($(".comment_list").find(".comment")[0] == undefined) {$(".comment_add_or_last").html("暂无人评论");}$(document).on('click','.show_reply_list', function(){ if($(this).closest('.comment').find(".reply_list").css("display") != "none") {$(this).closest('.comment').find(".show_remain_reply").css("display","none");$(this).html("查看回复");}else {$(this).closest('.comment').find(".show_remain_reply").css("display","block");$(this).html("收起回复");}$(this).closest('.comment').find(".reply_list").toggle(500);});$(document).on('click','.show_remain_reply', function(){$(this).html("已显示全部回复");//TODO发送数据});$(document).on('click','.comment_add_or_last', function(){var getMoreComment = $(this);//TODO如果获取的数据为零getMoreComment.html("没有更多评论了");});});});</script></body>
</html> layui的框架包得自己下载才能使用
global.css
@charset "utf-8";
/*
* @Author: Larry
* @Date: 2016-12-15 17:20:54
* @Last Modified by: qinsh
* @Last Modified time: 2016-12-20 01:16:32
* +----------------------------------------------------------------------
* | LarryBlogCMS [ LarryCMS网站内容管理系统 ]
* | Copyright (c) 2016-2017 http://www.larrycms.com All rights reserved.
* | Licensed ( http://www.larrycms.com/licenses/ )
* | Author: qinshouwei <313492783@qq.com>
* +----------------------------------------------------------------------
*/
/* initialize css */
*html{padding:0px}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td,span,a{margin:0;padding:0;}
body{font-size:12px;font-family: "微软雅黑","Microsoft YaHei","Microsoft YaHei UI", "Segoe UI", Arial, Verdana, Sans-Serif, sans-serif;}
em{font-style:normal}
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {display: block;}
audio,canvas,video {display: inline-block;}
audio:not([controls]) {display: none;height: 0;}
[hidden] {display: none;}
abbr[title] {border-bottom: 1px dotted;}
b,strong {font-weight: bold;}
pre {white-space: pre;white-space: pre-wrap;word-wrap: break-word;}
a{text-decoration: none;color: #333333;font-family: "Microsoft YaHei";}
a:hover{text-decoration: none;}
fieldset,img{border:0;}
ol,ul,li { list-style:none;}
del,ins{text-decoration:none;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
input,select{height:20px;font-size:12px;line-height:20px;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
textarea {overflow: auto; /* 1 */vertical-align: top; /* 2 */}
table{border-collapse: collapse;border-spacing: 0;}
caption,th{text-align:left;}
button,html input[type="button"],
input[type="reset"],input[type="submit"] {-webkit-appearance: button;
cursor: pointer;
}
a:active {outline: none;star:expression(this.onFocus=this.blur());}
a,a:hover,a:focus{text-decoration:none;outline:none;-webkit-transition:all 0.3s;transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;}
::selection{background:#FF6C60;color:#fff;}
::-moz-selection{background:#FF6C60;color:#fff;}
h1,h2,h3,h4,h5,h6,a,p,span{font-family: "微软雅黑","Microsoft YaHei","Microsoft YaHei UI","Hiragino Sans GB W3","Segoe UI", Arial, Verdana, Sans-Serif, sans-serif;}/* 清除浮动样式 */
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
/* 清除定位属性 */
.larry-position-clear{position: static;
}
/* layui框架样式定义 */
.layui-nav-item .layui-icon{position: relative; /*font-size: 20px;*/}
.layui-nav-item a cite{padding: 0 10px;}
.layui-larry-box{display:block;width: 100%;height: auto;padding: 10px;background: #fff;
}
/* 底部 */
.footer {padding: 30px 0;line-height: 30px;text-align: center;background-color: #eee;color: #666;font-weight: 300;
}
.footer a {padding: 0 5px;
}
body .layui-layout-admin .layui-body{padding-bottom: 0px;
}
body .layui-layout-admin .layui-larry-foot{height: 30px;padding: 5px 0;line-height: 30px;text-align: center;background-color: #eee;color: #666;font-weight: 300;border-left: 2px solid #1AA094;z-index: 998;
}
body .layui-layout-admin .layui-larry-foot a{padding: 0 5px;}body .layui-layout-admin .larry-footer-left{width: 300px;height: 30px;position: absolute;left: 0px;text-align: left;padding-left: 15px;font-size: 12px;
}
body .layui-layout-admin .larry-footer-left a{line-height: 30px;
}
body .layui-layout-admin .layui-larry-foot .p-admin{display: block;width: auto;text-align: center;position: absolute;left: 200px;font-size: 12px;
}
body .layui-layout-admin .layui-larry-foot .p-admin a{padding-right: 0px;
}
/* ---------------------------------------------------------------------- */
/*** 字体css*/
/* pxgridsicons字体 */
@font-face {font-family: 'pxgridsicons';src: url('font/pxgridsicons.eot');src: url('font/pxgridsicons.eot') format('embedded-opentype'), url('font/pxgridsicons.woff') format('woff'), url('font/pxgridsicons.ttf') format('truetype'), url('font/pxgridsicons.svg') format('svg');font-weight: normal;font-style: normal;
}
[class^="iconpx-"],
[class*=" iconpx-"] {font-family: 'pxgridsicons';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
.iconpx-user:before {content: "\e69d";
}
.iconpx-users:before {content: "\e69e";
}
.iconpx-user-add:before {content: "\e69f";
}
.iconpx-file-word-o:before {content: "\f1c2";
}
.iconpx-check-circle:before {content: "\f058";
}
.iconpx-chevron-down:before {content: "\f078";
}
.iconpx-chevron-up:before {content: "\f077";
}
/* bs字体 */
@font-face {font-family: 'FontAwesome';src: url('font/fontawesome-webfont.eot?v=4.7.0');src: url('font/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('font/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('font/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('font/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight: normal;font-style: normal;
}
.fa {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
.fa-bars:before {content: "\f0c9";
}
.fa-dashboard:before,
.fa-tachometer:before {content: "\f0e4";
}
/* Larry字体图标 */@font-face {font-family: "iconfont";src: url('font/iconfont.eot?t=1480736048214'); /* IE9*/src: url('font/iconfont.eot?t=1480736048214#iefix') format('embedded-opentype'), /* IE6-IE8 */url('font/iconfont.woff?t=1480736048214') format('woff'), /* chrome, firefox */url('font/iconfont.ttf?t=1480736048214') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('font/iconfont.svg?t=1480736048214#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-wenzhang:before { content: "\e600"; }.icon-shuaxin:before { content: "\e601"; }.icon-caidan:before { content: "\e645"; }.icon-pinglun:before { content: "\e602"; }.icon-qingchuhuancun:before { content: "\e603"; }.icon-weixin:before { content: "\e604"; }.icon-tianjiayonghu:before { content: "\e643"; }.icon-tianjia:before { content: "\e666"; }.icon-caidan1:before { content: "\e646"; }.icon-sousuo:before { content: "\e667"; }.icon-exit:before { content: "\e62c"; }.icon-home:before { content: "\e607"; }.icon-QQ:before { content: "\e608"; }.icon-11:before { content: "\e669"; }.icon-shanchu:before { content: "\e6d3"; }.icon-chatlist:before { content: "\e605"; }.icon-mima:before { content: "\e61b"; }.icon-caidan2:before { content: "\e6dc"; }.icon-yonghu:before { content: "\e620"; }.icon-shezhi:before { content: "\e64c"; }.icon-iconfontzhuce:before { content: "\e639"; }.icon-shanchu1:before { content: "\e692"; }.icon-tags:before { content: "\e66a"; }.icon-shezhi1:before { content: "\e64d"; }.icon-daohang:before { content: "\e606"; }.icon-denglu:before { content: "\e609"; }.icon-sousuo1:before { content: "\e6ab"; }.icon-huishouzhan:before { content: "\e656"; }.icon-tianjia1:before { content: "\e66b"; }.icon-circularrefresh:before { content: "\e6ad"; }.icon-diannao:before { content: "\e62b"; }.icon-llalbumshopselectorcreate:before { content: "\e66c"; }.icon-daohang1:before { content: "\e784"; }.icon-iconfuzhi01:before { content: "\e60a"; }.icon-home1:before { content: "\e6b1"; }.icon-sousuo2:before { content: "\e66d"; }.icon-refurbish:before { content: "\e754"; }.icon-iconfontsousuo1:before { content: "\e66e"; }.icon-zhuceguanli:before { content: "\e726"; }.icon-shanchu2:before { content: "\e66f"; }.icon-shezhi2:before { content: "\e64e"; }.icon-shezhi3:before { content: "\e64f"; }.icon-liuyanicon:before { content: "\e670"; }.icon-jiahao:before { content: "\e671"; }.icon-weixin1:before { content: "\e69f"; }.icon-shezhi4:before { content: "\e650"; }.icon-chaxun:before { content: "\e7b9"; }.icon-iconfontqq:before { content: "\e649"; }.icon-diannao1:before { content: "\e6db"; }.icon-huanyuan:before { content: "\e67e"; }.icon-beifen:before { content: "\e6a2"; }.icon-shanchu3:before { content: "\e672"; }.icon-xinxicaiji:before { content: "\e60b"; }.icon-msnui-copy:before { content: "\e778"; }.icon-gengxin:before { content: "\e65e"; }.icon-gengxin1:before { content: "\e616"; }.icon-sms:before { content: "\e673"; }.icon-duanxin:before { content: "\e674"; }.icon-jian:before { content: "\e675"; }.icon-xitong:before { content: "\e60f"; }.icon-lanmudaohang:before { content: "\e627"; }.icon-shenhe:before { content: "\e711"; }.icon-duanxin1:before { content: "\e698"; }.icon-neirong:before { content: "\e632"; }.icon-zhucechenggong:before { content: "\e615"; }.icon-iconfontmokuai:before { content: "\e657"; }.icon-geren:before { content: "\e624"; }.icon-password:before { content: "\e658"; }.icon-pinglun01:before { content: "\e617"; }.icon-liuyan:before { content: "\e6fc"; }.icon-yonghu1:before { content: "\e610"; }.icon-denglu1:before { content: "\e60c"; }.icon-xitonghuancun:before { content: "\e67b"; }.icon-chat:before { content: "\e611"; }.icon-iconwendang:before { content: "\e625"; }.icon-qqdenglu:before { content: "\e60d"; }.icon-denglu2:before { content: "\e67f"; }.icon-shuaxin1:before { content: "\e677"; }.icon-quanxian:before { content: "\e631"; }.icon-neirong1:before { content: "\e64a"; }.icon-wangzhanguanli:before { content: "\e659"; }.icon-iconfonthuishouzhan:before { content: "\e612"; }.icon-pinglun1:before { content: "\e628"; }.icon-daohanglanmu:before { content: "\e621"; }.icon-quanxianxiugai:before { content: "\e6e2"; }.icon-jianhao:before { content: "\e68d"; }.icon-icon1:before { content: "\e678"; }.icon-zoomout:before { content: "\e660"; }.icon-piliangicon:before { content: "\e613"; }.icon-xitongguanli:before { content: "\e69b"; }.icon-comiisqqdenglu:before { content: "\e62d"; }.icon-youqinglianjie:before { content: "\e694"; }.icon-jiaoseguanli:before { content: "\e89e"; }.icon-database:before { content: "\e779"; }.icon-denglutubiao:before { content: "\e6c3"; }.icon-02:before { content: "\e614"; }.icon-30wangzhanguanli:before { content: "\e65a"; }.icon-o5:before { content: "\e679"; }.icon-yuncaiji:before { content: "\e60e"; }.icon-iconfontkucunchaxun01:before { content: "\e67a"; }.icon-zhifu:before { content: "\e67c"; }.icon-sql:before { content: "\e6aa"; }.icon-icon:before { content: "\e622"; }.icon-c-databackup:before { content: "\e651"; }.icon-3beifen:before { content: "\e676"; }.icon-m-members:before { content: "\e6b8"; }.icon-jiaoseguanli1:before { content: "\e618"; }.icon-a130:before { content: "\e63f"; }.icon-zhandianpeizhi:before { content: "\e681"; }.icon-huiyuan:before { content: "\e619"; }.icon-dianyuan01:before { content: "\e652"; }.icon-huanyuan2:before { content: "\e6ac"; }.icon-weibiaoti46:before { content: "\e63c"; }.icon-xiugai:before { content: "\e682"; }.icon-i:before { content: "\e683"; }.icon-yumingguanli:before { content: "\e6d7"; }.icon-useradd:before { content: "\e8dc"; }.icon-zhandianguanli:before { content: "\e69e"; }.icon-gongyingshangfuwu:before { content: "\e61a"; }.icon-weibiaoti1:before { content: "\e6bd"; }.icon-anquanshezhi:before { content: "\e684"; }.icon-odpssql:before { content: "\e6f0"; }.icon-ht_expand:before { content: "\e65c"; }.icon-gongzhonghao:before { content: "\e65d"; }.icon-beifenyuhuifu:before { content: "\e7c7"; }.icon-dengdaishenhe:before { content: "\e686"; }.icon-jiaoseguanli2:before { content: "\ea62"; }.icon-zixuntousu:before { content: "\e685"; }.icon-zhandianguanli1:before { content: "\e687"; }.icon-anquanshezhi1:before { content: "\e688"; }.icon-liuyan1:before { content: "\e68a"; }.icon-beifenguanli:before { content: "\e68b"; }.icon-icon56-copy:before { content: "\e68c"; }.icon-pinglunguanli:before { content: "\e738"; }.icon-chaxun1:before { content: "\e68e"; }.icon-quanxianwodequanxiancha:before { content: "\e647"; }.icon-quanxianwodequanxiangou:before { content: "\e648"; }.icon-anquanshezhi2:before { content: "\e68f"; }.icon-xiugai1:before { content: "\e690"; }.icon-tubiao3:before { content: "\e691"; }.icon-wangzhanpeizhiguanli:before { content: "\e729"; }.icon-neirong2:before { content: "\e61c"; }.icon-rizhi:before { content: "\e61f"; }.icon-anquanshezhi3:before { content: "\e695"; }.icon-pay:before { content: "\e6a4"; }.icon-guanlijiaose:before { content: "\e626"; }.icon-xitongguanli1:before { content: "\e61d"; }.icon-liuyan2:before { content: "\e696"; }.icon-zhuce-copy:before { content: "\e61e"; }.icon-lanmuguanli:before { content: "\e654"; }.icon-pingmusuoding:before { content: "\e6a7"; }.icon-word:before { content: "\e653"; }.icon-geren1:before { content: "\e623"; }.icon-zhifu1:before { content: "\e72a"; }.icon-sql1:before { content: "\e697"; }.icon-shujukuguanli:before { content: "\e69c"; }.icon-role:before { content: "\e6bf"; }.icon-zhandian:before { content: "\e629"; }.icon-30wangzhanguanli1:before { content: "\e662"; }.icon-xitong1:before { content: "\e633"; }.icon-neirongguanli:before { content: "\e664"; }.icon-shengchengbaogao:before { content: "\e661"; }.icon-zengjia:before { content: "\e69d"; }.icon-wenzhang1:before { content: "\e62a"; }.icon-kuozhan:before { content: "\e706"; }.icon-xitongguanli2:before { content: "\e62e"; }.icon-anquanshezhi4:before { content: "\e6a0"; }.icon-power:before { content: "\e62f"; }.icon-weizhuce:before { content: "\e630"; }.icon-jiaoseguanli3:before { content: "\e64b"; }.icon-zhifu2:before { content: "\e6a5"; }.icon-zengjia1:before { content: "\e6a1"; }.icon-zhuti:before { content: "\e689"; }.icon-jianhao1:before { content: "\e6a3"; }.icon-weixin3:before { content: "\e6be"; }.icon-shujuku:before { content: "\e6a6"; }.icon-gengxin-copy-copy:before { content: "\e634"; }.icon-icon114:before { content: "\e635"; }.icon-yuming:before { content: "\e640"; }.icon-gerenkuozhan:before { content: "\e9a1"; }.icon-gongnengkuozhan:before { content: "\e693"; }.icon-tianjiayonghu1:before { content: "\e644"; }.icon-gengxin2:before { content: "\e65b"; }.icon-SQLServershujuku:before { content: "\e6a8"; }.icon-suoping:before { content: "\e776"; }.icon-wenzhang2:before { content: "\e636"; }.icon-anquanshezhi5:before { content: "\e6a9"; }.icon-pinglunguanli1:before { content: "\e637"; }.icon-huishouzhan1:before { content: "\e638"; }.icon-16:before { content: "\e63a"; }.icon-gengxin3:before { content: "\e63b"; }.icon-quanxian1:before { content: "\e699"; }.icon-quanxian2:before { content: "\e69a"; }.icon-huishouzhan2:before { content: "\e63d"; }.icon-daishenhe:before { content: "\e6ae"; }.icon-anquanshezhi6:before { content: "\e6af"; }.icon-sousuo-sousuo:before { content: "\e6b0"; }.icon-shujuquanxian:before { content: "\e668"; }.icon-shengchengbaogao1:before { content: "\e6c2"; }.icon-weishengcheng:before { content: "\e6c4"; }.icon-duanxin2:before { content: "\e6b2"; }.icon-chajian:before { content: "\e665"; }.icon-liebiaoye_liebiao:before { content: "\e63e"; }.icon-jiaoseguanli4:before { content: "\e663"; }.icon-system:before { content: "\e641"; }.icon-shujucaiji:before { content: "\e65f"; }.icon-xitongguanli3:before { content: "\e642"; }.icon-neirong3:before { content: "\e655"; }.icon-tags1:before { content: "\e6c5"; }.icon-sousuo_sousuo:before { content: "\e6b3"; }.icon-sousuo-sousuo1:before { content: "\e6d6"; }.icon-sousuo_sousuo1:before { content: "\e6b4"; }person.css
@charset "utf-8";/* 公共样式 */
body{background: #F1F2F7;overflow-x:hidden;padding: 0px;
}.larry-personal{margin: 0 auto;background: #ffffff;border-radius: 3px;padding-bottom: 0px;border: none;
}
header.larry-personal-tit{width: 100%;height: 50px;border-bottom: 1px solid #EEEFF1;padding:0 20px;padding-left: 30px;
}
header.larry-personal-tit span{line-height: 50px;font-size: 14px;color: #858585;font-weight: 300;
}
.larry-personal-body{padding: 0px;
}
.layui-form{padding: 0px;background: #FFFFFF;padding-top: 10px;
}
/* 个人信息 */
.layui-form .layui-form-item label.layui-form-label{width: 120px;font-family: "Microsoft YaHei";font-size: 14px;
}
.layui-input-block{margin-left: 120px;
}
.layui-disabled{background: #EEEEEE;color: #595963 !important;
}
.layui-disabled:hover{color: #595963 !important;
}
.layui-input-block textarea{height: 90px;
}
/* 修改密码 */
.changepwd{padding-bottom: 150px;
}
.change-submit{margin-top: 20px;
}
/* 日志管理 */
.layui-elem-quote{background: #f2f2f2;margin-bottom: 10px;font-size: 14px;
}
.larry-separate{background: #F2F2F2;width: 100%;height: 10px;
}
.mylog-info-tit .layui-tab-title{border: none;
}
.mylog-info-tit .layui-tab-title li{color: #ffffff;border-radius: 3px;margin-right: 10px;
}
.mylog-info-tit .layui-tab-title li i{padding-right: 5px;
}
.mylog-info-tit .layui-tab-title li.layui-this{background: #FF5722;border: none;border-radius: 3px;
}
.larry-log-del{display: inline-block;width: 100px;height: 38px;float: right;color: #ffffff;line-height: 38px;text-align: center;
}
.larry-log-del i{display: inline-block;font-size: 16px;
}
.mylog-info-box .layui-tab-content{margin: 0px;padding: 0px;
}
.mylog-info-box .layui-tab-content .layui-tab-item{margin: 0px;padding: 0px;width: 100%;
}
.mylog-info-box{padding-top: 0px;padding-bottom: 20px;
}
.mylog-info-box .layui-tab-item{
/* border: 1px solid red; */
}
.layui-field-box .layui-table{margin-top: 0px;border: 1px solid #E2E2E2;
}
.layui-field-box .layui-table tr th,
.layui-field-box .layui-table tr td{text-align: center;
/* padding: 0px; */
}
.layui-field-box .layui-table tr th:first-child,
.layui-field-box .layui-table tr td:first-child{width: 40px;padding: 0px;
}
.layui-field-box .layui-table tr th:nth-child(2){padding: 0px;text-align: left;text-indent: 5px;
}
.layui-field-box .layui-table tr td:nth-child(2){padding: 0px;text-align: left;
}
.table-hover tbody tr:hover{ background-color: #EEEEEE;
}
.layui-btn i{padding-right: 0px;
}
.larry-table-page{width: 100%;height: 50px;padding-top: 6px;
}
.larry-table-page .layui-btn{display: block;float: left;
}
.larry-table-page .page{padding-left:15px;float: left;
}
.larry-table-page .page .layui-laypage{padding: 0px;margin: 0px;
}在html页面添加了评论和回复的显示页面相关推荐
- html页面添加优酷视频,通过jsoup解析页面html获取优酷页面视频列表
通过jsoup解析页面html获取优酷页面视频列表 作者: javaboy2012 Email:yanek@163.com qq: 1046011462 代码如下: package com.ya ...
- js实现评论、回复消息显示刚刚，几分钟前，几小时前。
常见的评论或者朋友圈都能看到的发送时间是刚刚,几分钟前,几小时前,所以在做评论模块的时候也想进行这样的转换,其实转换的方法也挺简单的,就是获取到评论发送的时间戳和当前的时间戳进行对比,然后在除分.时. ...
- html页面添加大于号,2.7 在 HTML5 页面中插入半角的大于号“ ” , 使用的标记符应该是( )...
[单选题]0.4mol · L -1 氨水中 OH - 浓度是 0.1mol · L -1 氨水中 OH - 浓度的 [单选题]一个栈的输入序列为1 2 3 4 5,则下列序列中不可能是栈的输出序列的 ...
- Django开发个人博客网站——16、给博客添加上评论功能
博客中的评论系统其实是个很复杂的东西,但是网上已经有现成的轮子了,比如django-contrib-comments,可以直接拿过来用.但是我这里博客主要是给自己看的,并不想有太复杂的互动内容,因此, ...
- element-plus+vite+guiplan注册页面添加验证码功能
element-plus+vite+guiplan注册页面添加验证码功能 element-plus+vite+guiplan注册页面添加验证码功能 介绍 步骤 总结 element-plus+vite ...
- 使用Vue组件为页面添加评论
简介 首先这是一个Laravel练手项目,使用blade和Vue组件混合开发Web页面. 本文章将使用Vue.js组件为博客详情页添加评论功能,主要实现以下功能: 文章页面可查看评论 用户可进行评论, ...
- jquery实现层级显示 效果图_php运用无限级分类实现评论及回复功能
经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止; 从技术角度分析 ...
- 模仿qq空间评论以及回复
先看需求是怎么样的: 再看评论表结构的设计: create table t_comment (id varchar(32) primary key, #主键Idcustomer_id varchar( ...
- SSM项目实战(SSM商城 Maven项目 商品、评论、回复）
目录 前言 主要功能 开发环境 数据库设计 项目架构 项目技术介绍 运行效果展示 配置文件 项目源代码 总结 前言 SSM框架(spring+springMVC+mybatis),是目前比较主流的Ja ...
最新文章
- 三个轻量级WebServer--lighttpd,thttpd,shttpd介绍
- 《微信公众平台开发最佳实践》——第3章 基 础 接 口 3.1 接收用户消息
- JavaScript实现hamiltonianCycle哈密尔顿图算法（附完整源码）
- Angular开发模式下的setNgReflectProperties函数
- eks volumn s3_威客电竞 深渊联赛S3欧洲区总决赛，Secret成就八连冠
- Okhttp的封装和回调
- 全网独家分享，软件测试就该这么学，3个月进大厂！
- 万能模拟器eve-ng介绍
- 版本更新带来的缓存问题_【第1563期】缓存最佳实践 amp; maxage的陷阱
- 【干货】跨端体验度量的思考与实现（含直播回放）
- 各种门锁的内部结构图_防盗门锁锁体内部结构图是什么？
- 微信开发：JS自动关闭内置浏览器回到微信对话窗口
- linux 监控报文命令 nc,linux监控命令nc用法
- 苹果 CEO 为什么选中了何同学？
- 图表点编辑数据无反应_word图表无法编辑数据 word图表不能编辑数据
- VMware虚拟机的安装以及基一些础命令
- Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=bd1817bb‘ does not provide
- 爬虫实战—拿下最全租房数据 | 附源码
- 耦合中心游移和双权重因子的鲸鱼优化算法
- CTF--攻防世界crypto新手训练1-6