jquery实现手机端移动端聊天窗口效果代码

代码语言:html

所属分类:布局界面

代码描述:jquery实现手机端移动端聊天窗口效果代码

代码标签: jquery 聊天 手机端

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        h5 {
	margin:0
}
img {
	max-width:100%;
	vertical-align:middle
}
input {
	outline:0
}
body {
	max-width:720px;
	margin:0 auto;
	background:#f1f1f1;
	color:#333;
	font-size:.26rem
}
.header {
	border-bottom:1px solid #dfdfdf;
	padding:0 .2rem;
	height:1rem;
	line-height:1rem;
	background:#fff;
	position:fixed;
	width:100%;
	max-width:720px;
	box-sizing:border-box;
	z-index:100
}
.back {
	position:absolute;
	top:0;
	left:.3rem;
	background:url(../images/left.png) no-repeat;
	width:.2rem;
	height:.4rem;
	margin-top:.34rem;
	background-size:.2rem .4rem
}
.header .tit {
	font-size:.32rem;
	vertical-align:middle;
	text-align:center;
	height:1rem;
	line-height:1rem;
	font-weight:400
}
.header .right {
	position:absolute;
	right:.3rem;
	top:0;
	float:none;
	font-size:.3rem;
	line-height:1.2rem
}
#message {
	background-color:#f1f1f1;
	padding:1.2rem .3rem 1rem
}
.time {
	font-size:.24rem;
	color:#999;
	margin-bottom:.3rem;
	text-align:center
}
#footer {
	position:fixed;
	bottom:0;
	height:1rem;
	background-color:#fff;
	li.........完整代码请登录后点击上方下载按钮下载查看

网友评论0