主要技术要点:
css:利用position属性和margin属性实现基本布局。
jq/js:留言板功能使用prepend实现最新的留言在顶部显示。
防QQ空间留言板功能html页面:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漠丶叹尘的空间</title>
<link rel="icon" sizes="any" mask href="http://qzonestyle.gtimg.cn/qzone/v8/img/Qzone.svg">
<link rel="stylesheet" type="text/css" href="css/qqZone.css">
</head>
<body>
<div class="header">
This is the head nav
</div>
<div class="topInfo">
<span class="edit">编辑</span>
<div class="zoneName">
<h2>漠丶叹尘 的空间</h2>
<p>知我者,谓我心忧。不知我者,谓我何求。</p>
</div>
<div class="support">
<img src="image/support_1.png" alt="赞">
<span class="num">7</span>
</div>
<div class="tips">7人赞过</div>
<!-- bottom nav -->
<div class="top_bottom">
<div class="photo">
<img src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124">
</div>
<div class="uploadphoto">修改头像</div>
<div class="container">
<ul class="section">
<li>主页</li>
<li>日志</li>
<li>相册</li>
<li>留言板</li>
<li>说说</li>
<li>个人档</li>
<li>音乐</li>
<li>更多</li>
</ul>
</div>
</div>
</div>
<!-- 下面实现留言板功能 -->
<div class="mainframe">
<div class="title">留言板</div>
<div class="message">主人寄语</div>
<div class="info">
这是主人留下的寄语~
</div>
<div class="content" contenteditable="true"></div>
<input type="button" name="submit" value="发表" class="subbtn">
<div class="numofmessage">留言(0)</div>
<!-- 下面是留言区 -->
<div class="msgFrame">
<!-- <div class="content_1">
<img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">
<div class="mainInfo">
<div class="userId"><a href="#">zipple</a></div>
<div class="conInfo">
这是一条留言。
</div>
<div class="time">2016-12-19 23:46:11</div>
</div> -->
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".zoneName").hover(function(){
$(".edit").show();
},function(){
$(".edit").delay(500).hide(0);//延时执行
})
//鼠标响应事件
$(".support").mouseover(function(e){
var left=e.pageX;
var top=e.pageY;
top=top-41;//这里是因为这个元素的父元素使用了margin-top属性,使得top值偏移了41像素。
top=top+25;//加上鼠标自己的高度
console.log(left+"px"+" top:"+top)
$(".tips").css({"left":left+"px","top":top+"px"});
// $(".tips").delay(800).show(0);加了延时执行后会使得鼠标响应事件不灵敏
// $(".tips").show("slow");
$(".tips").fadeIn();
})
/*
*鼠标离开事件,其中leave是指离开当前元素,而out包括其子元素
*/
// $(".support").mouseout(function(){
// $(".tips").hide();
// })
$(".support").mouseleave(function(){
console.log("leave");
// $(".tips").css("display","none");
// $(".tips").hide("slow");
$(".tips").fadeOut();
})
//修改头像
$(".photo").hover(function(){
$(".uploadphoto").delay(800).show(0);
},function(){
$(".uploadphoto").hide();
})
$(".uploadphoto").hover(function(){
if ($(this).is(":visible")) {
console.log("visible")
}
else
$(".uploadphoto").show();
})
//创建一个div
function creatDiv(className,closeName,left,top){
var div =$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>');
div.addClass(className);
$('body').append(div);
left+=360;
var close=$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>');
close.addClass(closeName);
$('body').append(close);
}
$(".uploadphoto").click(function(){
var className='dialog';
var closeName="close";
console.log("点击上传");
creatDiv(className,closeName,500,200);
$(".close").bind("click",function(){
$(".dialog").remove();
$(".close").remove();
console.log("关闭成功");
$(".uploadphoto").hide();
});
})
//下面是错误的尝试,直接绑定一个函数名称可能导致该函数直接执行!
// $(".close").bind("click",closeDialog());
// function closeDialog(){
// $(".dialog").remove();
// $(".close").remove();
// console.log("关闭");
// }
//接下来储存留言数据
var count=0;
$(".subbtn").click(function(){
var text= $(".content").text();
var time=getCurrentTime();
if(text==""){
alert("您还没有输入任何内容!");
}
else{
loadmessage(text,'zipple',time);
count++;
console.log('success!');
$(".content").text("");
$(".numofmessage").text("留言("+count+")");
}
})
function loadmessage(message,id,time){
//创建content_index
//包含img.name + mainInfo
//.userId .conInfo .time
var contentDiv='<div class="content_1">';
contentDiv+='<img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">';
contentDiv+='<div class="mainInfo">'
contentDiv+=' <div class="userId"><a href="#">';
contentDiv+=id;
contentDiv+='</a></div> <div class="conInfo">';
contentDiv+=message;
contentDiv+='</div> <div class="time">';
contentDiv+=time;
contentDiv+='</div> </div> </div>'
$(".msgFrame").prepend(contentDiv);
}
function getCurrentTime(){
var today=new Date();
var y=today.getFullYear();
var mh=today.getMonth();
mh++;
var d=today.getDate();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m)
s=checkTime(s)
var time=y+"-"+mh+"-"+d+" "+h+":"+m+":"+s;
return time;
}
function checkTime(i){
if(i<10)
i="0"+i
return i
}
</script>
</html>
CSS样式表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漠丶叹尘的空间</title>
<link rel="icon" sizes="any" mask href="http://qzonestyle.gtimg.cn/qzone/v8/img/Qzone.svg">
<link rel="stylesheet" type="text/css" href="css/qqZone.css">
</head>
<body>
<div class="header">
This is the head nav
</div>
<div class="topInfo">
<span class="edit">编辑</span>
<div class="zoneName">
<h2>漠丶叹尘 的空间</h2>
<p>知我者,谓我心忧。不知我者,谓我何求。</p>
</div>
<div class="support">
<img src="image/support_1.png" alt="赞">
<span class="num">7</span>
</div>
<div class="tips">7人赞过</div>
<!-- bottom nav -->
<div class="top_bottom">
<div class="photo">
<img src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124">
</div>
<div class="uploadphoto">修改头像</div>
<div class="container">
<ul class="section">
<li>主页</li>
<li>日志</li>
<li>相册</li>
<li>留言板</li>
<li>说说</li>
<li>个人档</li>
<li>音乐</li>
<li>更多</li>
</ul>
</div>
</div>
</div>
<!-- 下面实现留言板功能 -->
<div class="mainframe">
<div class="title">留言板</div>
<div class="message">主人寄语</div>
<div class="info">
这是主人留下的寄语~
</div>
<div class="content" contenteditable="true"></div>
<input type="button" name="submit" value="发表" class="subbtn">
<div class="numofmessage">留言(0)</div>
<!-- 下面是留言区 -->
<div class="msgFrame">
<!-- <div class="content_1">
<img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">
<div class="mainInfo">
<div class="userId"><a href="#">zipple</a></div>
<div class="conInfo">
这是一条留言。
</div>
<div class="time">2016-12-19 23:46:11</div>
</div> -->
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".zoneName").hover(function(){
$(".edit").show();
},function(){
$(".edit").delay(500).hide(0);//延时执行
})
//鼠标响应事件
$(".support").mouseover(function(e){
var left=e.pageX;
var top=e.pageY;
top=top-41;//这里是因为这个元素的父元素使用了margin-top属性,使得top值偏移了41像素。
top=top+25;//加上鼠标自己的高度
console.log(left+"px"+" top:"+top)
$(".tips").css({"left":left+"px","top":top+"px"});
// $(".tips").delay(800).show(0);加了延时执行后会使得鼠标响应事件不灵敏
// $(".tips").show("slow");
$(".tips").fadeIn();
})
/*
*鼠标离开事件,其中leave是指离开当前元素,而out包括其子元素
*/
// $(".support").mouseout(function(){
// $(".tips").hide();
// })
$(".support").mouseleave(function(){
console.log("leave");
// $(".tips").css("display","none");
// $(".tips").hide("slow");
$(".tips").fadeOut();
})
//修改头像
$(".photo").hover(function(){
$(".uploadphoto").delay(800).show(0);
},function(){
$(".uploadphoto").hide();
})
$(".uploadphoto").hover(function(){
if ($(this).is(":visible")) {
console.log("visible")
}
else
$(".uploadphoto").show();
})
//创建一个div
function creatDiv(className,closeName,left,top){
var div =$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>');
div.addClass(className);
$('body').append(div);
left+=360;
var close=$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>');
close.addClass(closeName);
$('body').append(close);
}
$(".uploadphoto").click(function(){
var className='dialog';
var closeName="close";
console.log("点击上传");
creatDiv(className,closeName,500,200);
$(".close").bind("click",function(){
$(".dialog").remove();
$(".close").remove();
console.log("关闭成功");
$(".uploadphoto").hide();
});
})
//下面是错误的尝试,直接绑定一个函数名称可能导致该函数直接执行!
// $(".close").bind("click",closeDialog());
// function closeDialog(){
// $(".dialog").remove();
// $(".close").remove();
// console.log("关闭");
// }
//接下来储存留言数据
var count=0;
$(".subbtn").click(function(){
var text= $(".content").text();
var time=getCurrentTime();
if(text==""){
alert("您还没有输入任何内容!");
}
else{
loadmessage(text,'zipple',time);
count++;
console.log('success!');
$(".content").text("");
$(".numofmessage").text("留言("+count+")");
}
})
function loadmessage(message,id,time){
//创建content_index
//包含img.name + mainInfo
//.userId .conInfo .time
var contentDiv='<div class="content_1">';
contentDiv+='<img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">';
contentDiv+='<div class="mainInfo">'
contentDiv+=' <div class="userId"><a href="#">';
contentDiv+=id;
contentDiv+='</a></div> <div class="conInfo">';
contentDiv+=message;
contentDiv+='</div> <div class="time">';
contentDiv+=time;
contentDiv+='</div> </div> </div>'
$(".msgFrame").prepend(contentDiv);
}
function getCurrentTime(){
var today=new Date();
var y=today.getFullYear();
var mh=today.getMonth();
mh++;
var d=today.getDate();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m)
s=checkTime(s)
var time=y+"-"+mh+"-"+d+" "+h+":"+m+":"+s;
return time;
}
function checkTime(i){
if(i<10)
i="0"+i
return i
}
</script>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_bg1.png");
font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
height: 1000px;
}
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 41px;
background: #001e3b;
text-align: center;
line-height: 41px;
font-size: 16px;
color: grey;
z-index: 100;
}
.topInfo{
width: 100%;
height: 300px;
background-repeat: no-repeat;
/*background-position: -276px 42px;*/
margin-top: 41px;
background-position:-275px top;
background-attachment: scroll;
background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_top.jpg");
position: relative;
}
.edit{
position: absolute;
left: 417px;
/*width: 100%;*/
height: 18px;
background:#54B3E3;
color: white;
font-size: 14px;
display: none;
}
.zoneName{
position: absolute;
top: 20px;
left: 185px;
color: white;
width: 280px;
height: 60px;
}
.zoneName h2{
font-size: 28px;
font-weight: normal;
}
.zoneName p{
font-size: 14px;
margin-top: 3px;
}
.support{
width: 58px;
height: 33px;
position: absolute;
right: 183px;
top: 50px;
background-color: rgba(0,0,0,.4);
border-radius: 18px;
color: white;
line-height: 30px;
cursor: pointer;
}
.support img{
width: 18px;
height: 18px;
margin-top: 7px;
margin-left: 13px;
}
.num{
margin-top: -33px;
width: 18px;
height: 18px;
margin-left: 40px;
display: block;
margin-bottom:2px;
cursor: pointer;
}
.tips{
width: 60px;
height: 20px;
font-size: 12px;
background-color: white;
color: black;
text-align: center;
line-height: 20px;
position: absolute;
left: 0;
right: 0;
display: none;
}
.top_bottom{
width: 100%;
height: 50px;
background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_menu_bg.png");
position: absolute;
bottom: 0;
}
.photo{
width: 128px;
height: 128px;
position: absolute;
left: 185px;
top: -96px;
padding: 1px;
}
.photo img{
width: 120px;
height:120px;
border: #FFF 3px solid;
border-radius: 2px;
display: block;
}
.uploadphoto{
width: 100px;
height: 20px;
font-size: 12px;
color: #eee;
background-color: rgba(0,0,0,.8);
text-align: center;
line-height: 20px;
position: absolute;
left: 200px;
top: 8px;
display: none;
cursor: pointer;
}
.dialog{
width: 400px;
height: 300px;
z-index: 100;
position: fixed;
background-image:url("../image/upload.png");
background-color: white;
background-repeat: no-repeat;
background-position: center;
}
.close{
width: 40px;
height: 40px;
z-index: 1000;
position: fixed;
background-image:url("../image/close.png");
background-size: 100% 100%;
/*background-color: red;*/
cursor: pointer;
}
.container{
width: 980px;
margin: 0 auto;
height: 100%;
line-height: 50px;
}
.top_bottom ul.section{
list-style: none;
margin-left: 165px;
float: left;
}
.top_bottom ul.section li{
float: left;
/*margin-right: 28px;*/
font-size: 16px;
color: #eee;
font-weight: normal;
/*font-family: Lucida Console, Monaco, Courier New, mono, monospace;*/
font-family: Tahoma, Helvetica, Arial, sans-serif;
cursor: pointer;
}
.top_bottom ul.section li:hover{
color: #36648B;
}
ul.section li:nth-child(1){
margin-right: 20px
}
ul.section li:nth-child(2){
margin-right: 20px
}
ul.section li:nth-child(3){
margin-right: 15px
}
ul.section li:nth-child(4){
margin-right: 20px
}
ul.section li:nth-child(5){
margin-right: 17px
}
ul.section li:nth-child(6){
margin-right: 15px
}
ul.section li:nth-child(7){
margin-right: 18px
}
.mainframe{
width: 900px;
height: 2703px;
margin:20px auto;
background-color:#24639D;
color:#EDEFF0;
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
.title{
width: 858px;
height: 52px;
margin:0 auto;
line-height: 52px;
font-family: 微软雅黑,Tohoma;
font-size: 14px;
color: #2b9de6;
/*border-color: #1f70bb;*/
border-bottom: 2px solid #1f70bb;
}
.title:hover{
color:#70CCFF;
}
.message{
width: 858px;
height: 35px;
margin: 0 auto;
line-height: 35px;
color: #eee;
border-bottom: 2px solid #1f70bb;
font-family:微软雅黑, Tohoma;
}
.info{
width: 858px;
height: 140px;
color: #EDEFF0;
margin: 0 auto;
line-height: 40px;
border-bottom: 2px solid #1f70bb;
font-size: 12px;
}
.content{
width: 858px;
height: 100px;
word-break: break-all;
margin: 0 auto;
border: 2px solid #1f70bb;
border-top: 0px;
background-color: #e2e2e2;
color: black;
text-indent: 2px;
font-size: 14px;
}
.subbtn{
width: 72px;
height: 28px;
line-height: 28px;
font-size: 14px;
border-radius: 2px;
background-color: #46B2EF;
color: #FFFFFF;
border: 1px solid #3686B3;
cursor:pointer;
margin-left: 20px;
margin-bottom: 50px;
}
.subbtn:hover{
background-color: #1a88cf;
}
.numofmessage{
width: 858px;
height: 20px;
color: #EDEFF0;
margin: 0 auto;
line-height: 20px;
border-bottom: 2px solid #1f70bb;
font-family:微软雅黑, Tohoma;
}
.msgFrame{
width: 858px;
height: 2200px;
margin: 0 auto;
}
.content_1{
width: 858px;
height: 190px;
color: #EDEFF0;
margin: 0 auto;
border-bottom: 2px solid #1f70bb;
}
.name{
width: 50px;
height: 50px;
margin: 20px 20px;
border-radius: 5px;
}
a{
color: #70CCFF;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.mainInfo{
width: 766px;
height: 143px;
float: right;
margin-top: 20px;
}
.userId{
width: 100%;
height: 20px;
font-size: 14px;
}
.conInfo{
width: 100%;
height: 100px;
margin-top: 12px;
font-size: 12px;
}
.time{
width: 100%;
height: 20px;
font-size: 12px;
margin-bottom: 20px;
color: #8AB8E3;
}