首先看一下写完后的效果图：
当我们在编辑框里写下吐槽的内容时，在它的下方就会弹出一条评论，而且是最新的总是在第一条。下面主要来讲一下里面有哪些标签。 发表评论部分： 1、有一个最大的div，将评论内容、发布按钮等都包裹在里面。 2、“有什么想吐槽的赶紧来说说”这个是一个
3、写评论内容也是一个div,如果要让div变成可以编辑的，就给它设置一个样式 contenteditable=”true” 4、表情、按钮也是在一个盒子里，然后表情是一张图片，发布按钮是一个span标签 评论更新部分： 1、有一个最大的div，将头像、nickname、评论的内容都放在一个盒子里面 2、头像和nickname又在一个div里，而且还被包裹在dl里面，头像是在 ,签名在 里面 3、评论的内容仍然是一个div **常见样式：width、height、background、margin、border、color、font、font-size、font-family、float margin是一个非常重要的样式，很多地方都能用到它。 margin: 属性值可以有1-4个值，值的类型有 auto | length | percentage margin:10px 5px 15px 20px; - 上外边距是 10px - 右外边距是 5px - 下外边距是 15px - 外边距是 20px
margin:10px 5px 15px; - 上外边距是 10px - 右外边距和左外边距是 5px - 下外边距是 15px - margin:10px 5px; - 上外边距和下外边距是 10px - 右外边距和左外边距是 5px 还有一个非常重要的值，那就是auto，让元素居中—-margin: 0 auto;
还有几个对我来说比较陌生的样式： 1、border-radius：如果希望边框有圆角呈现，就需要用到这个样式，数值越大，弧度就越大。更新评论部分中的头像就是用到了这个样式：border-radius: 50%;而且这是它最大的，再大也就是呈现圆形。当然这个数值可以是…px。 2、 box-shadow：内部阴影，可以使边框给人一种飘起来的感觉。它有四个参数，分别表示水平位移、垂直位移、模糊半径和颜色。这个用的也挺多。 3、line-height：行高 4、float:浮动，如果要让两个div在同一行就需要用这个。float：left;向左浮动，一个接着一个排到右边 5、cursor: pointer;当鼠标在标签上，呈现一个怎么样的形状就通过这个来设置，常用的值有pointer–放上去是一只手，move–十字 crosshair–实心的十字架
第一步：获得评论的内容 第二步：判断内容是否为空，如果为空，就提醒用户“内容不能为空”，否则，发布 第三步：将内容追加到下方的更新评论部分 prepend()，每次追加都是在第一条 第四部：清空内容面板中的内容 判断内容是否为空的方法： var t=$(“.content”).html(); if（t==null||t==”“）{
} 下面这段程序里面有些问题，当内容为空的时候，t.length==17，这个问题的原因还未找到，所以在下面用t.length==17来判断，而不是t==null。
<script type="text/javascript"> $(".fabu").click(function(){ //得到要发布的内容 var t=$(".content").html(); //alert(t); //判断内容是否为空 if(t.length==17||t==""){ alert("吐槽内容不能为空哦！"); }else{ //把发布内容追加到msg里面去 用\进行转义 $(".msg").prepend("<div class=\"item animated rollIn\">" + "<dl>" + "<dt> <img src=\"img/head1.jpeg\" width= 70px height= 70px/></dt>" + "<dd>北城浅巷墨漓</dd> " + "</dl>" + "<div class=\"txt\">" + t + "</div>" + "</div>"); //内容应该清除 $(".content").empty(); } }); //选择的表情是哪个 //先找到btn中的图片 $(".btnface").click(function(){ $(".panel").slideToggle(); }); $(".panel img").click(function(){ //把当前被点击的图片复制一份 然后拼接到内容面板上 var img=$(this).clone(); $(".content").append(img); }); </script>