想做一个发表评论的页面，但同时又不希望想贴吧或者其他发表评论的结构和布局。于是就采用了jQuery的动画，将评论发布的过程拟物化了。
下面是示意图：
（写评论）
（发表评论——会动态的随机将新的评论贴到展板上，可以覆盖掉原来的评论）
先看布局：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="Emily"> <link rel="stylesheet" href="commentStyle.css"/> <script src="jquery-1.11.1.js"></script> <script src="commentFunction.js"></script> <title>发表评论</title> </head> <body><div class="container"><div class="showBox"><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li><li><div class="item"><p class="titleShow">title</p><div class="contentShow">content</p></div></li></div><div class="comment"><div class="titleBox"><input class="title" type="text" value="title"/></div><div class="contentBox"><textarea class="content">content</textarea></div></div><div class="commentbg"><p class="bgTitle">title</p><p class="bgContent">content</p></div><button class="submit" type="button">发表评论</button></div></body></html>
需要注意的地方：用户写评论的那张大的便签在评论发表的过程中是要通过animation动画移走的，如果只有那一个div.comment，在发表的动态过程中原始的区域就会出现空白。所以给这个div加上了一个背景div.commnetbg，为了给人一种便签本有很多页的感觉。
然后是样式文件，这里就不多解释了：
.container {width:70%; height:650px; margin-left:auto; margin-right:auto; background:#efefef; border-radius:10px; padding:10px; font-family:"΢ÈíÑźÚ", "Microsoft Yahei";}.container .showBox {width:570px; height:600px; background:white; border-radius:10px; float:left; padding:20px;}.container .showBox ul {list-style:none; display:inline; width:0px; height:0px;}.container .showBox li {list-style:none; display:inline; float:left; width:100px; height:150px; background:white; box-shadow: 0px 0px 10px black; margin:15px; padding:5px;}.container .showBox .item {width:90px; height:140px; background:white; padding:5px;}.container .showBox .item .titleShow {margin:0px; padding:5px; height:12%; font-size:15px; font-weight:bold;}.container .showBox .item .contentShow {margin:0px; padding:5px; width:80px; height:78%; font-size:12px; word-break:break-all; overflow:hide;}.container .comment {width:200px; height:300px; background:white; box-shadow: 0px 0px 5px black; float:left; position:relative; left:60px; top:120px; z-index:2;}.container .comment .titleBox {margin:10px; padding:0px 15px; height:12%; font-size:28px; font-weight:bold;}.container .comment .titleBox .title {border:none; font-size:25px; font-weight:bold; width:100%; }.container .comment .contentBox {margin:10px; padding:0px 15px; height:78%; font-size:20px;}.container .comment .contentBox .content {border:none; font-size:20px; width:100%; height:100%; overflow:hide;}.container .submit { position:absolute; left:935px; top:460px;}.container .commentbg {width:200px; height:300px; background:white; box-shadow: 0px 0px 5px black; float:left; position:absolute; left:878px; top:138px; z-index:1;}.container .commentbg .bgTitle {margin:15px 25px 10px 25px; font-size:25px; font-weight:bold; width:100%; }.container .commentbg .bgContent {margin:0px 25px; font-size:18px; font-weight:normal;}最重要的是动态过程的实现：
去看日出，去散步，去欣赏大自然，
