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>