发表说说 - Newbie_小白

代码：

　CSS（test.css）：

　　* {
margin: 0px;
padding: 0px;
}

body {
background: url("qq/bg.jpg") no-repeat top center;
font-size: 12px;
font-family: "微软雅黑";
color: #666;
}

img {
border: none;
}

/*qq开始*/
.qq {
width: 600px;
height: 165px;
background: #fff;
margin: 100px auto;
border-radius: 3px;
position: relative;
}

.qq .qq_title {
font-size: 14px;
padding: 10px 0px 10px 20px;
}

.qq_msg {
width: 540px;
height: 50px;
border: 1px solid #ccc;
margin: 0px auto;
padding: 10px;
outline: none; /*focus选中没了边框*/
}

.qq .qq_face {
width: 600px;
height: 40px;
}

.qq .qq_face .qq_box {
float: left;
margin: 10px 0 0 20px;
}

.qq .qq_face .qq_btn {
width: 82px;
height: 30px;
display: block;
background: #ff8140;
text-align: center;
line-height: 30px;
text-decoration: none;
font-size: 14px;
color: #fff;
font-weight: bold;
border-radius: 3px;
float: right;
margin: 13px 20px 0 0;
}

.qq .qq_con {
width: 365px;
height: 142px;
background: #fff;
margin: -5px 0 0 20px;
box-shadow: 1px 1px 3px 1px #000;
position: absolute;
left: 20px;
top: 150px;
padding: 3px;
display:none;
}

.qq .qq_con ul li {
list-style: none;
float: left;
margin: 2px;
}
/*qq结束*/

　　HTML：

<!doctype html>
<html>
<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>JAVA开发QQ空间大数据说说系统</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<link href="test.css" rel="stylesheet">

</head>
<body>



<div class="qq">
<p class="qq_title">有什么新鲜事告诉大家？</p>

<div class="qq_msg" contenteditable="true"></div>
<p class="qq_face">
<a href="#" class="qq_box">

<img src="qq/face.gif" alt="QQ表情" width="22" height="22">
</a>
<a href="#" class="qq_btn">发表</a>
</p>

<div class="qq_con">
<ul id="qq_ul">
<li><img src="qq/1.gif" alt="QQ表情" width="22" height="22"></li>
<li><img src="qq/2.gif" alt="QQ表情" width="22" height="22"></li>...
<li><img src="qq/3.gif" alt="QQ表情" width="22" height="22"></li>

</ul>
</div>
</div>

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//点击表情按钮展开表情
$(".qq_box").click(function () {
$(".qq_con").toggle(500);
});
//点击表情加入文本框
$("#qq_ul").find("li").click(function () {
var img = $(this).find("img").clone();
$(".qq_msg").append(img);
});
});
</script>
</body>
</html>

运行结果：

posted on 2016-03-21 20:55 Newbie_小白阅读(150) 评论(0) 收藏举报