jquery+css实现手机端聊天即时通讯ui效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery+css实现手机端聊天即时通讯ui效果代码

下面为部分代码预览，完整代码请点击下载或在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" />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script>
    
        <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(//repo.bfw.wiki/bfwrepo/image/60b95f5dd4bec.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;
	line-height:1rem;
	width:100%;
	max-width:720px;
	border-top:1px solid #ddd
}
#footer img {
	margin-left:.2rem;
	width:.5rem
}
#footer input {
	margin-left:.2rem;
	width:3.5rem;
	height:.64rem;
	border-radius:.1rem;
	border:.01rem solid #ddd;
	padding:0 .15rem
}
#footer p {
	width:1.2rem;
	height:.68rem;
	font-size:.3rem;
	color:#fff;
	line-height:.68rem;
	text-align:center;
	background-color:#ddd;
	border-radius:.1rem;
	float:right;
	margin-top:.2rem;
	margin-right:.2rem
}
.reply:after,.ask:after,.msg:after {
	content:"";
	clear:both;
	display:table
}
.msg {
	position:relative
}
.reply .msg .name {
	position:absolute;
	font-size:.24rem;
	color:#999;
	top:-.1rem;
	left:.9rem
}
.msg>img {
	width:.8rem;
	float:left
}
.reply .msg>p {
	top:.3rem
}
.msg>p {
	float:left;
	margin:0 .4rem;
	padding:.25rem;
	background:#fff;
	font-size:.3rem;
	position:relative;
	border-radius:.2rem;
	max-width:5rem;
	min-height:.8rem;
	box-sizing:border-box;
	word-wrap:break-word
}
.msg_input {
	position:absolute;
	background:url(//repo.bfw.wiki/bfwrepo/images/chat/msg-input.png) no-repeat;
	background-size:.31rem auto;
	width:.31rem;
	height:.51rem;
	left:-.31rem;
	top:.25rem
}
.ask .msg img,.ask .msg p,.ask .msg {
	float:right
}
.ask .msg_input {
	left:auto;
	right:-.11rem;
	transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-o-transform:rotate(180deg)
}
.reply,.ask {
	padding-bottom:.7rem
}
.alert_novip,.flower_num,.give_flower {
	display:none;
	padding:.3rem .5rem;
	font-size:.28rem
}
.alert_novip p,.flower_num p {
	margin-bottom:.45rem
}
.layui-layer-wrap button {
	font-size:.28rem;
	padding:.2rem .3rem;
	margin-top:.1rem;
	background:#f8f8f8;
	border-radius:10px
}
.flower_num button {
	padding:.2rem .5rem;
	border-radius:10px
}
.layui-layer-wrap button:first-child {
	float:left
}
.layui-layer-wrap button:last-child {
	float:right;
	background:#ff7171;
	color:#fff
}
.alert_novip button {
	padding:.2rem .3rem;
	border-radius:10px
}
.flower {
	width:.8rem;
	margin:0 auto
}
.give_flower {
	text-align:center
}
.give_flower p {
	text-align:center;
	line-height:1.5
}
.give_flower input {
	width:1rem;
	margin-right:.1rem;
	margin-top:.2rem
}
.give_flower button {
	display:block;
	width:3rem;
	font-size:.28rem;
	margin:0 auto;
	margin-top:.6rem;
	float:none!important;
	line-height:.65rem;
	border-radius:10px
}
.msg img {
	border-radius:100px;
}
    </style>
</head>

<body>
    <header.........完整代码请登录后点击上方下载按钮下载查看