微博发布小小案例

Css部分：

* {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        .box {

            width: 600px;

            margin: 100px auto;

            border: 1px solid #000;

            padding: 20px;

        }

        textarea {

            width: 450px;

            height: 160px;

            outline: none;

            resize: none;

        }

        ul {

            width: 450px;

            padding-left: 80px;

        }

            ul li {

                line-height: 25px;

                border-bottom: 1px dashed #cccccc;

            }

        input {

            float: right;

        }

HTML部分：

 

Script部分：

$(function () {

            $("#btn").click(function () {

                 var a = document.getElementById("txt").value;//获取输入框里面的文字

                 $("<li>" + a + "</li>").prependTo($("#ul"));//把输入框里的文字获取到ul里面的li里面

                 $("#txt").val("");//将输入框里面的内容清空

               })

            })

效果图：