制作论坛帖子页面

body主体

html 复制代码

<body>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
</body>

CSS样式

html 复制代码

<style>
        img{
            float: left;
            width: 60px;
            margin-right: 10px;
        }
        li{
            padding: 10px 0;
            border-bottom: 1px #999999 dashed;
            overflow: hidden;
        }
        *{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";}
ul,li{list-style: none;}
.bbs{margin: 0 auto; width: 600px; position: relative;}
header{padding: 5px 0; border-bottom: 1px solid #cecece;}
header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}
.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}
.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}
.post select{width: 200px; height: 30px;}
.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}
.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}
 
    </style>

script实现要求代码块

html 复制代码

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            $("span:eq(0)").click(function(){
                //显示post
                $(".post").show();
            });
            $(".btn").click(function(){
                var $li=$("<li></li>");
                var $div=$("<div></div>");
 
                //var $bt=$(".title").val();
                //var $bk=$("select").val();
                //var $nr=$(".content").val();
                //头像
                var tou=new Array("images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg");
                var index=Math.floor(Math.random()*4);
                var $img=$("<img src="+tou[index]+"/>");
                $div.append($img);
                $li.append($div);
                //标题
                var $h1=$("<h1 style='float: left; width: 520px; font-size: 16px; line-height: 35px'>"+$(".title").val()+"</h1>");
                $li.append($h1);
                //时间
                var date=new Date();
                var n=date.getFullYear();
                var y=date.getMonth()+1;
                var shi=date.getHours();
                var fen=date.getMinutes();
                var miao=date.getSeconds();
                var sj=n+"-"+y+"-"+shi+":"+fen+":"+miao;
                var $p=$("<p>"+"版块："+$("select").val()+"\n"+"时间："+sj+"</p>");
                $li.append($p);
                //将li加到ul中
                $("ul").prepend($li);
                //清空
                $(".title").val("");
                $("select").val("");
                $("textarea").val("");
                //隐藏post
                $(".post").hide();
 
            })
        })
 
    </script>