.comment-filed{ width:640px; margin:0 auto; } .comment-num{ text-align: right; font-size:14px; } .div-txt-submit{ text-align:right; margin-top:8px; } .comment-submit{ background-color:#63B8FF; margin-top:15px; text-decoration:none; color:#fff; padding:5px; font-size:14px; } .txt-commit{ border:1px solid blue; width:620px; height: 60px; padding: 10px; } .txt-reply{ width: 100%; height: 60px; } .comment-filed-list{ margin-top:20px; } .comment-list{ margin-top:2px; width:herit; height:50px; border-top:1px solid gray; } .comment-ul{ list-style:none; padding-left:0; } .head-pic{ width:40px; height:40px; } .cm{ position:relative; top:0px; left:40px; top:-40px; width:600px; } .cm-header{ padding-left:5px; } .cm-content{ padding-left:5px; } .cm-footer{ padding-bottom:15px; text-align:right; border-bottom: 1px dotted #CCC; } .comment-reply{ text-decoration:none; color:gray; font-size: 14px; } .children{ list-style:none; background-color:#FAFAFA; padding-left:0; margin-left:40px; } .children-cm{ position:relative; left:40px; top:-40px; width:90%; }
页面布局代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>php评论及回复功能</title> <link type="text/css" href="https://www.jb51.net/Public/css/comment.css" > <script type="text/javascript" src="https://www.jb51.net/Public/js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/Public/js/comment.js" ></script> </head> <body> <div> <!--发表评论区begin--> <div> <div> <span>{$num}条评论</span> </div> <div> <div> <textarea replyid="0"></textarea> </div> <div> <a parent_id="0" href="javascript:void(0);" ><span>发表评论</span></a> </div> </div> </div> <!--发表评论区end--> <!--评论列表显示区begin--> <!-- {$commentlist} --> <div > <div><span>全部评论</span></div> <div > <!--一级评论列表begin--> <ul> <volist> <li comment_id="{$data.id}"> <div > <div> <img src="https://www.jb51.net/{$data.head_pic}" alt=""> </div> <div> <div> <span>{$data.nickname}</span> <span>{$data.create_time}</span> </div> <div> <p> {$data.content} </p> </div> <div> <a comment_id="{$data.id}" href="javascript:void(0);" >回复</a> </div> </div> </div> <!--二级评论begin--> <ul> <volist > <li comment_id="{$child.id}"> <div > <div> <img src="https://www.jb51.net/{$child.head_pic}" alt=""> </div> <div> <div> <span>{$child.nickname}</span> <span>{$child.create_time}</span> </div> <div> <p> {$child.content} </p> </div> <div> <a replyswitch="off" comment_id="{$child.id}" href="javascript:void(0);" >回复</a> </div> </div> </div> <!--三级评论begin--> <ul> <volist > <li comment_id="{$grandson.id}"> <div > <div> <img src="https://www.jb51.net/{$grandson.head_pic}" alt=""> </div> <div> <div> <span>{$grandson.nickname}</span> <span>{$grandson.create_time}</span> </div> <div> <p> {$grandson.content} </p> </div> <div> <!-- <a comment_id="1" href="javascript:void(0);" >回复</a> --> </div> </div> </div> </li> </volist> </ul> <!--三级评论end--> </li> </volist> </ul> <!--二级评论end--> </li> </volist> </ul> <!--一级评论列表end--> </div> </div> <!--评论列表显示区end--> </div> </body> </html>
sql语句:
DROP TABLE IF EXISTS `t_comment`; CREATE TABLE `t_comment` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id', `parent_id` int(11) NOT NULL COMMENT '上级评论id,若是一级评论则为0', `nickname` varchar(100) DEFAULT NULL COMMENT '评论人昵称', `head_pic` varchar(400) DEFAULT NULL COMMENT '评论人头像', `content` text COMMENT '评论内容', `create_time` datetime DEFAULT NULL COMMENT '评论或回复发表时间', PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=148 DEFAULT CHARSET=utf8;
页面布局少一个jquery.js请自行加上。