Html
    Css
    Js

    
                        
.container {
	width:400px;
	height:400px;
	border-radius:10px;
	border:1px solid #ddd;
	margin:40px auto 0;
	padding:10px;
}
.content {
	width:380px;
	margin:0 auto 20px;
	height:300px;
	border:1px solid #aaa;
	padding:10px;
	overflow-y:auto;
}
.container img {
	width:50px;
	height:50px;
	border-radius:50%;
	margin-right:10px;
}
.info div {
	float:left;
}
.info input {
	height:42px;
	line-height:50px;
	width:250px;
	margin-right:10px;
	border-radius:5px;
	font-size:20px;
	padding-left:10px;
}
.info button {
	height:50px;
	border-radius:5px;
	background:none;
	border:1px solid #ccc;
	width:60px;
	font-size:20px;
}
.content img {
	width:30px;
	height:30px;
	border-radius:50%;
	vertical-align:top;
}
#span1 {
	display:inline-block;
	max-width:310px;
	padding:5px;
	background:#ccc;
	color:#fff;
}
#span2 {
	float:right;
	max-width:310px;
	padding:5px;
	color:#fff;
	background:green;
}
#img2 {
	float:right;
	margin-left:10px;
	margin-right:0;
}
#p1:after {
	display:block;
	content:"";
	clear:both;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

模拟手机发送短信功能(原创)

用原生js写模拟手机发送短信,可以进行聊天,点击图片可以切换头像,点击发送,发送已输入的内容

0