首页 网页素材 简单css好看的评论框代码分享 2019年8月1日 0条评论 简单css好看的评论框代码分享 内容 相关 如图所示: 代码如下: <div class="comment-div"> <div class="commentlist-wrap" id="J_commentlist" lazyload-src="iqshwCommon.comment.getPage(0)"> </div> <div class="lgy"> <div class="pl-520am" data-id="169330" data-classid="87"> <div class="pl-header">评论(已有<em id="pl-totalnum">6</em>条评论) <span class="pl-userinfo" id="pl-userinfo"> <a href="javascript:goTop();"> 登陆会员</a> </span></div> <div class="pl-area"> <div class="pl-area-userpic"> <img id="pl-userpic" src="https://ae01.alicdn.com/kf/H596671506b9243b7abf3d7c95edda908B.png"> </div> <div class="pl-area-post"> <div class="pl-post"> <div class="pl-textarea"><textarea class="pl-post-word" id="pl-520am-f-saytext" placeholder="提醒:应监管部门要求 2018年3月22日起 需绑手机才可免审核评论,请去会员中心修改"></textarea></div> <div class="pl-tools"> <ul> <li onclick="lgyPl.showPickFace(event,0)"><a class="pl-icon icon-face"></a></li> <li onclick="lgyPl.showPickImg(event,0)"><a class="pl-icon icon-img"></a></li> <li class="pl-tools-lastchild"><button class="pl-submit-btn" id="pl-submit-btn-main" onclick="lgyPl.submitComment(this)">发 布</button></li> </ul> </div> <div class="pl-face-box" id="pl-face-box" style="display: none;"> <div class="pl-face-box-before"><a class="pl-icon icon-face"></a></div> <li onclick="lgyPl.addplface('[/愤怒]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_01.gif"></a></li><li onclick="lgyPl.addplface('[/笑]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_02.gif"></a></li><li onclick="lgyPl.addplface('[/调皮]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_03.gif"></a></li><li onclick="lgyPl.addplface('[/汗]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_04.gif"></a></li><li onclick="lgyPl.addplface('[/偷笑]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_05.gif"></a></li><li onclick="lgyPl.addplface('[/大哭]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_06.gif"></a></li><li onclick="lgyPl.addplface('[/抓狂]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_07.gif"></a></li><li onclick="lgyPl.addplface('[/委屈]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_08.gif"></a></li><li onclick="lgyPl.addplface('[/便便]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_09.gif"></a></li><li onclick="lgyPl.addplface('[/炸]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_10.gif"></a></li><li onclick="lgyPl.addplface('[/刀]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_11.gif"></a></li><li onclick="lgyPl.addplface('[/微笑]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_12.gif"></a></li><li onclick="lgyPl.addplface('[/色]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_13.gif"></a></li><li onclick="lgyPl.addplface('[/得意]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_14.gif"></a></li><li onclick="lgyPl.addplface('[/涂]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_15.gif"></a></li><li onclick="lgyPl.addplface('[/冒火]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_16.gif"></a></li><li onclick="lgyPl.addplface('[/嘴]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_17.gif"></a></li><li onclick="lgyPl.addplface('[/贼笑]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_18.gif"></a></li><li onclick="lgyPl.addplface('[/龇牙]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_19.gif"></a></li><li onclick="lgyPl.addplface('[/鄙视]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_20.gif"></a></li><li onclick="lgyPl.addplface('[/泪]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_21.gif"></a></li><li onclick="lgyPl.addplface('[/赞]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_22.gif"></a></li><li onclick="lgyPl.addplface('[/踩]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_23.gif"></a></li><li onclick="lgyPl.addplface('[/胜利]',0)"><a href="javascript:;"><img width="20" border="0" height="20" src="/e/data/face/new_face_24.gif"></a></li> </div> <div class="pl-img-box" id="pl-img-box" style="display: none;"> <div class="pl-img-box-before"><a class="pl-icon icon-img"></a></div> <div class="pl-img-file"> <form enctype="multipart/form-data" method="post" action="https://sm.ms/api/upload" id="upform"> <input type="file" name="smfile" id="smfile" class="up-file" style="border:0;"> <input type="submit" id="btn" value="上传" class="btn"> </form> </div> </div> </div> </div> </div> <div class="pl-clr" id="pl-start"></div> <div class="pl-title">最新评论</div> <div class="pl-show-list" id="pl-show-all"> <div class="pl-area pl-show-box" id="pl-show-box-217665"> <div class="pl-area-userpic"> <img id="pl-userpic" src="https://ae01.alicdn.com/kf/H596671506b9243b7abf3d7c95edda908B.png" style="cursor:pointer;"> </div> <div class="pl-area-post"> <div class="pl-show-title"><span style="color:#2787b6;">游客*</span> <span class="pl-show-time pl-fr">来自上海市 2019年07月22日 17:23</span></div> <div class="pl-show-saytext">这有啥用啊</div> <div class="pl-show-tools"><a id="pl-err-info-217665" style="display: none;">您已提交过</a> <a href="javascript:;" onclick="lgyPl.doForPl(217665,1,this)"><i class="pl-icon icon-good"></i><span id="pl-1-217665">1</span></a> <a href="javascript:;" onclick="lgyPl.doForPl(217665,0,this)"><i class="pl-icon icon-bad"></i><span id="pl-0-217665"></span></a> <a class="pl-reply" onclick="lgyPl.showReply(217665,'游客*')" href="javascript:;">回复</a></div> <div class="pl-show-replay"></div> </div> <div class="pl-clr"></div> </div> <div class="pl-area pl-show-box" id="pl-show-box-217567"> <div class="pl-area-userpic"> <img id="pl-userpic" src="https://ae01.alicdn.com/kf/H596671506b9243b7abf3d7c95edda908B.png" style="cursor:pointer;"> </div> <div class="pl-area-post"> <div class="pl-show-title"><span style="color:#2787b6;">szh0905</span> <span class="pl-show-time pl-fr">来自江西省南昌市 2019年07月22日 10:55</span></div> <div class="pl-show-saytext">挺有意思的,马克一下</div> <div class="pl-show-tools"><a id="pl-err-info-217567"></a> <a href="javascript:;" onclick="lgyPl.doForPl(217567,1,this)"><i class="pl-icon icon-good"></i><span id="pl-1-217567"></span></a> <a href="javascript:;" onclick="lgyPl.doForPl(217567,0,this)"><i class="pl-icon icon-bad"></i><span id="pl-0-217567"></span></a> <a class="pl-reply" onclick="lgyPl.showReply(217567,'szh0905')" href="javascript:;">回复</a></div> <div class="pl-show-replay"></div> </div> <div class="pl-clr"></div> </div> <div class="pl-area pl-show-box" id="pl-show-box-217563"> <div class="pl-area-userpic"> <img id="pl-userpic" src="https://ae01.alicdn.com/kf/H596671506b9243b7abf3d7c95edda908B.png" style="cursor:pointer;"> </div> <div class="pl-area-post"> <div class="pl-show-title"><span style="color:#2787b6;">游客*</span> <span class="pl-show-time pl-fr">来自陕西省西安市 2019年07月22日 10:46</span></div> <div class="pl-show-saytext">能看个锤子</div> <div class="pl-show-tools"><a id="pl-err-info-217563"></a> <a href="javascript:;" onclick="lgyPl.doForPl(217563,1,this)"><i class="pl-icon icon-good"></i><span id="pl-1-217563"></span></a> <a href="javascript:;" onclick="lgyPl.doForPl(217563,0,this)"><i class="pl-icon icon-bad"></i><span id="pl-0-217563"></span></a> <a class="pl-reply" onclick="lgyPl.showReply(217563,'游客*')" href="javascript:;">回复</a></div> <div class="pl-show-replay"></div> </div> <div class="pl-clr"></div> </div> <div class="pl-area pl-show-box" id="pl-show-box-217556"> <div class="pl-area-userpic"> <img id="pl-userpic" src="https://ae01.alicdn.com/kf/H596671506b9243b7abf3d7c95edda908B.png" style="cursor:pointer;"> </div> <div class="pl-area-post"> <div class="pl-show-title"><span style="color:#2787b6;">氵氺性楊婲</span> <span class="pl-show-time pl-fr">来自广东省深圳市 2019年07月22日 10:36</span></div> <div class="pl-show-saytext">用来泡M不错,莫名其妙又没登陆了</div> <div class="pl-show-tools"><a id="pl-err-info-217556"></a> <a href="javascript:;" onclick="lgyPl.doForPl(217556,1,this)"><i class="pl-icon icon-good"></i><span id="pl-1-217556"></span></a> <a href="javascript:;" onclick="lgyPl.doForPl(217556,0,this)"><i class="pl-icon icon-bad"></i><span id="pl-0-217556"></span></a> <a class="pl-reply" onclick="lgyPl.showReply(217556,'氵氺性楊婲')" href="javascript:;">回复</a></div> <div class="pl-show-replay"></div> </div> <div class="pl-clr"></div> </div> <div class="pl-area pl-show-box" id="pl-show-box-217555"> <div class="pl-area-userpic"> <img id="pl-userpic" src="https://ae01.alicdn.com/kf/H596671506b9243b7abf3d7c95edda908B.png" style="cursor:pointer;"> </div> <div class="pl-area-post"> <div class="pl-show-title"><span style="color:#2787b6;">游客*</span> <span class="pl-show-time pl-fr">来自广东省深圳市 2019年07月22日 10:35</span></div> <div class="pl-show-saytext">用来泡M不错</div> <div class="pl-show-tools"><a id="pl-err-info-217555"></a> <a href="javascript:;" onclick="lgyPl.doForPl(217555,1,this)"><i class="pl-icon icon-good"></i><span id="pl-1-217555"></span></a> <a href="javascript:;" onclick="lgyPl.doForPl(217555,0,this)"><i class="pl-icon icon-bad"></i><span id="pl-0-217555"></span></a> <a class="pl-reply" onclick="lgyPl.showReply(217555,'游客*')" href="javascript:;">回复</a></div> <div class="pl-show-replay"></div> </div> <div class="pl-clr"></div> </div> <div class="pl-area pl-show-box" id="pl-show-box-217551"> <div class="pl-area-userpic"> <img id="pl-userpic" src="https://ae01.alicdn.com/kf/H596671506b9243b7abf3d7c95edda908B.png" style="cursor:pointer;"> </div> <div class="pl-area-post"> <div class="pl-show-title"><span style="color:#2787b6;">游客*</span> <span class="pl-show-time pl-fr">来自安徽省六安市 2019年07月22日 10:28</span></div> <div class="pl-show-saytext">不错,可以多学习一下</div> <div class="pl-show-tools"><a id="pl-err-info-217551"></a> <a href="javascript:;" onclick="lgyPl.doForPl(217551,1,this)"><i class="pl-icon icon-good"></i><span id="pl-1-217551"></span></a> <a href="javascript:;" onclick="lgyPl.doForPl(217551,0,this)"><i class="pl-icon icon-bad"></i><span id="pl-0-217551"></span></a> <a class="pl-reply" onclick="lgyPl.showReply(217551,'游客*')" href="javascript:;">回复</a></div> <div class="pl-show-replay"></div> </div> <div class="pl-clr"></div> </div> </div> <div id="pl-pagination"></div> <button onclick="lgyPl.getNewsComment(0,this);" class="showAllComment buttonGray">查看更多评论</button></div> <script type="text/javascript" src="/e/extend/lgyPl/api.js"></script> </div> </div> <style> .comment-div { padding-top: 20px; border-top: 1px solid #ccc; margin-top: 20px; padding-left: 20px; } .comment-div { padding-left: 20px; } .pl-520am{font-family:'microsoft yahei';font-size:14px;color:#333;} .pl-520am a {color: rgb(68, 112, 142);text-decoration: none;} .pl-clr{clear: both;} .pl-fr{float: right;} .pl-header{font-size: 18px;} .pl-header em{font-weight:normal;font-family: Georgia;} .pl-header em{color:#ee542a;font-weight:bold} .pl-userinfo{float: right;} .pl-area{padding:0 0 0 60px;margin-top:15px} #pl-userpic{width:42px;} .pl-area-userpic{margin-left:-60px;float:left} .pl-area-userpic img{width: 40px;height: 42px} .pl-area-post{float:right;width:100%;} .pl-post{border:2px solid #ccd4d9;border-radius:3px} .pl-textarea{width:100%;padding:0;height:75px;position:relative;overflow:hidden;} .pl-post-word{border:none;background:none;outline:none;width:99%;margin:5px auto;display:block;height: 60px;font-family: 宋体;line-height: 22px;font-size: 14px;background-attachment: scroll;resize:none;} .pl-icon { background-image: url(https://ae01.alicdn.com/kf/Ha60866820e9040c0a2c0e44d7684f309T.png); background-repeat: no-repeat; display: inline-block; } .pl-tools{border-top:1px solid #ddd;height: 40px} .pl-tools ul,.pl-tools ul li{list-style: none;padding:0;margin: 0;} .pl-tools ul li{display: inline-block;clear: both;border-right: 1px solid #ddd;padding:5px 10px 0 5px;cursor:pointer;height: 35px;} .icon-face{width: 25px;height: 25px;background-position: -20px 6px} .icon-face:hover{background-position: -20px -19px} .icon-img{ width: 21px;height: 25px;background-position: -49px 7px;} .icon-img:hover{background-position: -49px -18px} .pl-tools-lastchild{border:0;float: right;position: relative;height: 38px!important;min-width: 80px} .pl-tools-lastchild button{border:0;background:#2787B6;height: 100%;width: 100%;position: absolute;outline: none;color: #fff;bottom: -2px;top:-1px;right: -2px;border-radius:0 0 3px 0;font-size: 18px;text-shadow:1px 1px 3px #000;font-weight: normal;cursor: pointer;} .pl-tools-lastchild button:hover,.pl-tools-lastchild button[disabled]{opacity: 0.8} .pl-showinfo{padding:8px;text-align: center;background-color: rgb(254, 242, 225);color: rgb(238, 84, 42);margin-top: 10px;display: none;} .pl-show-list{position: relative;} .pl-show-list-loading{top:0;left:0;background: rgba(0,0,0,.1) url(loading.gif) no-repeat center;position: absolute;height: 100%;width: 100%;} .pl-show-hot-list{display: none} .pl-title{margin-top: 20px; background-color: transparent; border-bottom: 2px solid rgb(136, 171, 195); padding-bottom: 10px; font-size: 16px } .buttonGray { outline: none; background: -moz-linear-gradient(top, #f3f3f3, #e5e5e5); background: -webkit-gradient(linear, top, #f3f3f3, #e5e5e5); background: -webkit-linear-gradient(top, #f3f3f3, #e5e5e5); background: -o-linear-gradient(top, #f3f3f3, #e5e5e5); display: block; border: 1px solid #b6b6b6; border-radius: 3px 3px 3px 3px; color: #000; font-size: 16px; height: 30px; line-height: 25px; margin: 20px 0px; text-align: center; text-shadow: 1px 1px 1px #FFFFFF; width: 100%; display: none; } .ecomment { margin:0; padding:0; word-wrap:break-word } .ecomment { margin-bottom:12px; overflow-x:hidden; overflow-y:hidden; padding-bottom:3px; padding-left:3px; padding-right:3px; padding-top:3px; padding:3px; border:solid 1px #dedede } .ecommentauthor { float:left; color:#2787b6; display:block; width:100% } .ecommentauthor i { float:right; font-style:normal } .ecommenttext { clear:left; margin:0; padding:0 } .pl-show-box{margin: 15px 0;clear: both;border-bottom: 1px solid #ddd;padding-bottom: 10px} .pl-show-title{margin-bottom: 10px} .pl-show-time{color: #999} .pl-show-saytext{line-height: 22px;font-size: 14px;word-wrap: break-word;} .pl-show-tools{text-align: right;padding:5px 0;font-size: 12px;line-height: 12px} .pl-show-tools i{position: relative;top:2px;margin:0 2px 0 5px} .pl-show-tools a{position: relative!important;} .icon-good{width: 18px;height: 20px;background-position: -97px 6px;} .icon-bad{width: 18px;height: 20px;background-position: -97px -18px;} .icon-good:hover{background-position: -122px 6px} .icon-bad:hover{background-position: -122px -18px} .pl-reply{margin-left: 15px;} .pl-post-reply{margin-top: 5px} .ShowPlKey{position: relative;top: -4px;line-height: normal;} .ShowPlKey input{outline: none} .ShowPlKey img{position: relative;top:-1px;} .pl-post{position: relative;} .pl-face-box-before{position: absolute;padding:4px 10px 10px 5px;background-color:#fff;top:-40px;} .pl-face-box-before .icon-face{background-position: -20px -19px} .pl-face-box,.pl-img-box {position: absolute;max-width: 246px;height: auto;background: #fff;border: 2px solid #ccd4d9;left: -2px;border-top: 1px solid #ccd4d9;display: none;z-index: 3} .pl-face-box li{display: inline-block;padding:10px;border-right: 1px solid #eee;border-bottom: 1px solid #eee} .pl-img-box{left: 40px;z-index: 2;} .pl-img-box-before{position: absolute;padding:5px 10px 10px 8px;background-color:#fff;top:-40px;} .pl-img-box-before .icon-img{background-position: -49px -19px} .pl-img-file{padding: 10px;} .pl-img-file input{outline: none;border: 1px solid #ccc;padding: 5px;width: 150px} .pl-img-file button{border:none;border-radius:0;border:1px solid #ccc;background: none;padding:5px 15px;outline: none;cursor:pointer;} #pl-pagination{text-align: center;margin-top: 30px} .pl-null{padding:10px 0;} .pl-loading{display:inline-block;position: relative;height: 15px;width: 15px;background: url(loading.gif) no-repeat center;background-size:100%;top:2px;margin-right: 5px} </style> 运行代码清空代码复制代码 点赞  (0) 打赏 分享 支付宝扫一扫 微信扫一扫 企鹅扫一扫