新浪微博的简单构造，最基本的功能

整片文章的最终效果

整个html需要用的图片和代码都可以在本文中找到

所需文件和文件夹的对应关系

页面最上面的图片

左边的图片

右边的图片

1

2

3

html代码

下面是js代码

部分js

$(function(){

// 0. 监听内容的实时输入

$('body').delegate('.comment', 'prorertychange input', function(){ // 事件委托给body

// console.log($(this).val()) // 验证输入是否正确

// 判断是否输入了内容

if($(this).val().length > 0){ // 如果输入的内容长度大于0

// 让按钮可用

$('.send').prop('disabled', false) // 按钮的disabled属性为false不可点击

}else{

// 让按钮不可用

$('.send').prop('disabled', true) // 按钮的disabled属性为true 可点击

}

})

// 1. 监听发布按钮的点击

$('.send').click(function(){

// 拿到用户输入的内容

var $text = $('.comment').val();

// 根据内容创建节点

var $weibo = createEle($text);

// 插入微博

$('.messagelist').prepend($weibo)

})

// 2.监听顶 的点击

$("body").delegate(".infotop", "click", function(){ // 赞按钮的点击事件委托给body 之后调用函数

$(this).text(parseInt($(this).text()) + 1) // 当前点击的a标签（赞）的text文本设置成当前文本转化成数字之后+1的结果

})

// 3.监听踩的点击

$("body").delegate(".infodown", "click", function(){ // 踩按钮的点击事件委托给body 之后调用函数

$(this).text(parseInt($(this).text()) + 1) // 当前点击的a标签（踩）的text文本设置成当前文本转化成数字之后+1的结果

})

// 4.监听删除的点击

$("body").delegate(".infodel", "click", function(){ // 删除按钮的点击事件委托给body 之后调用函数

$(this).parents(".info").remove(); // 当前点击的a标签（删除）把class=info的p删除，也就是一个评论的所有内容删除

})

// 创建节点方法

function createEle(text) { //创造下面的html代码赋值给 $weibo 并返回

var $weibo = $('

'+ text +'

' + formatDate() + '00删除

return $weibo

}

// 生成时间的方法

function formatDate(){ //取出年月日时分秒 然后字符串拼接，最后返回一个整体字符串

var date = new Date;

// console.log(date.getFullYear()) //年

// console.log(date.getMonth()+1) // 月的结果比正常结果小1所以要+1

// console.log(date.getDate()) // 日

// console.log(date.getHours()) // 时

// console.log(date.getMinutes()) // 分

// console.log(date.getSeconds()) // 秒

return date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()

}

})

页面背景图片

下面是css样式代码

部分样式代码

*{

margin: 0; /* 外边距：0 */

padding: 0; /* 内边距：0 */

}

html, body{

width: 100%; /* 宽：100% */

height: 100%; /* 高：100% */

}

body{

background: url(../image/背景.jpg) no-repeat 0 0; /*为网页添加图片背景 不拼接 起始00*/

background-size: 100% 1500px; /* 是按照等比缩放铺满整个区域 */

background-position: center center; /*设置背景原图像的位置，背景图像如果要重复，将从这一点开始*/

}

.nav{ /*最上面的导航栏*/

width: 100%; /* 宽：100% */

height: 48px; /* 高：48像素*/

}

.nav>img{ /*导航栏中的图片*/

width: 100%; /* 宽：100% */

}

.content{ /* 去除最上面和最下面的部分，中间的部分*/

width: 80%; /* 宽：80% */

height: 80%; /* 高：80% */

margin: 200px auto; /* 外边距：上：200像素 左右居中*/

}

.content>.left{ /*中间的左面的部分*/

float: left; /* 浮动：左浮动 */

width: 20%; /* 宽：父框体的20% */

overflow: hidden; /* 溢出：隐藏 */

}

.content>.right{ /*中间的右面的部分*/

float: right; /* 浮动：右浮动 */

width: 30%; /* 宽：父框体的30% */

overflow: hidden; /* 溢出：隐藏 */

}

.content>.center{ /*中间的中间的部分*/

float: left; /* 浮动：左浮动 */

width: 50%; /* 宽：父框体的50% 左边20% 右边30% 就只剩下50%了 */

height: 28%; /* 高：父框体的28% 看着比较顺眼吧*/

background: url(../image/中间2.png) no-repeat 0 0; /*添加背景图片 不拼接 起始：0 0*/

写评论的图片

background-size: 100% auto; /* 背景图片左右100% 上下自动*/

}

.center>.comment{ /*输入框的样式*/

width: 96%; /* 宽：96% */

height: 46%; /* 高：46% */

margin-top: 7%; /* 外上边距：7% */

margin-left: 2%; /* 外左边距：2% */

resize: none; /* 去除输入框右下角的拖拽块*/

/* border: none; /* 输入框的边框去掉*/

outline: none; */ /* 去除输入框选中时的边框*/

}

.send{ /* 发布按钮的样式 */

width: 14%; /* 宽：14% */

height: 15%; /* 高：15% */

margin-top: 0.7%; /* 外上边距：0.7% */

margin-left: 84.5%; /* 外左边距：84.5% */

background-color: #ff883b; /* 背景颜色：橘红 */

border: none; /* 边框：无 */

outline: none; /* 轮廓：无 */

color: white; /* 颜色（字体）：白色*/

}

.messagelist{ /*放评论的盒子的样式*/

float: left; /* 浮动：左浮动*/

width: 50%; /* 宽：父框体的50% */

background-color: white; /* 背景颜色：白色 */

}

.info{ /*一条留言的样式*/

padding: 10px 20px; /* 内边距：上10像素 左20像素 */

border-bottom: #ccc solid 2px; /* 下边框：灰色 实线 2像素宽 */

}

.infotext{ /* 评论的文本 */

line-height: 25px; /* 行高：25像素 */

margin-bottom: 10px; /* 外下边距：10像素 */

}

.infooperation{ /* 评论下面的部分 */

width: 100%; /* 宽：100% */

overflow: hidden; /* 溢出：隐藏 */

}

.infotime{ /* 设置评论下方时间的样式*/

float: left; /* 浮动：左浮动 */

font-size: 14px; /* 字体大小：14像素 */

color: #ccc; /* 颜色：灰色 */

}

.infohandle{ /* 设置 点 踩 删 的样式*/

float: right; /* 浮动：右浮动 */

font-size: 14px; /* 字体大小：14像素 */

}

.infohandle>a{ /* 赞 踩 删 p中的a标签样式 */

text-decoration: none; /* 去除a标签下面的横线*/

color: #CCC; /* 字体颜色：灰色*/

background: url(../image/赞.png) no-repeat 0 0; /*把赞的图片设置成背景*/

赞

background-size: 25px 25px; /*背景大小设置成25像素大小*/

padding-left: 25px; /* 内左边距25像素*/

margin-left: 10px; /*外左边距 10像素*/

}

.infohandle>a:nth-child(2){ /* a标签的第二个孩子的样式*/

background: url(../image/踩.png) no-repeat 0 0; /* 设置踩的背景图片 */

background-size: 25px 25px; /* 背景大小：25像素 */

}

踩

.infohandle>a:nth-child(3){ /* a标签的第三个孩子的样式*/

background: url(../image/删除.jpg) no-repeat 0 0; /* 设置删除的背景图片 */

background-size: 25px 25px; /* 背景大小：25像素 */

}

删除

.page{ /*最下面显示页码的样式*/

width: 80%;

height: 40px;

background-color: #f77b1e;

float: left;

margin-left: 10%;

text-align: right; /* 文字：靠右*/

padding: 10px; /*加了内边距后p会变大*/

box-sizing: border-box; /*保证盒子不会变大 */

}

.page>a{

text-decoration: none; /*去除a标签下面的横线*/

display: inline-block;

width: 20px;

height: 20px;

border: #ccc solid 1px;

text-align: center; /*文字：居中*/

line-height: 20px;

color: #2b2b2b;

}