微博发布页面

一、布局

首先看一下写完后的效果图：

当我们在编辑框里写下吐槽的内容时，在它的下方就会弹出一条评论，而且是最新的总是在第一条。下面主要来讲一下里面有哪些标签。
发表评论部分：
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–实心的十字架

三、js

第一步：获得评论的内容
第二步：判断内容是否为空，如果为空，就提醒用户“内容不能为空”，否则，发布
第三步：将内容追加到下方的更新评论部分 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>