Html
    Css
    Js

    
                        
li {
	list-style:none;
	background:#FFFFFF;
	float:left;
	clear:both;
	font-family:"arial,helvetica,sans-serif";
	font-size:12px;
	color:#F074A1;
	padding:8px 5px 8px 8px;
	margin:10px 0px 0px 35px;
	display:inline-block;
	max-width:150px;
	border:1px solid #F9B2D0;
	border-radius:5px;
	position:relative;
	top:0px;
	left:0px;
	word-wrap:break-word;
}
ul {
	background:#FFFBFA;
	font-family:"arial,helvetica,sans-serif";
	font-size:12px;
	color:#EC771D;
	padding:8px 5px 8px 8px;
	max-width:150px;
	margin:10px 35px 0px 0px;
	display:inline-block;
	float:right;
	clear:both;
	border:1px solid #69AB1F;
	border-radius:5px;
	position:relative;
	top:0px;
	left:0px;
	word-wrap:break-word;
}
a {
	display:block;
	width:30px;
	height:30px;
	background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat;
	background-size:30px 30px;
	position:absolute;
	left:-36px;
	top:0px;
	border-radius:50%;
}
em {
	display:block;
	width:30px;
	height:30px;
	background:url(http://www.jq22.com/img/cs/500x500-2.png) no-repeat;
	background-size:30px 30px;
	position:absolute;
	right:-35px;
	top:0px;
	border-radius:50%;
}
#box1 {
	width:271px;
	height:550px;
	position:relative;
	top:34px;
	left:50px;
	background:url(http://www.jq22.com/img/cs/300x500-9.png) no-repeat;
	background-size:cover;
	float:left;
}
#box2 {
	width:271px;
	height:550px; 
	position:relative;
	left:100px;
	top:34px;
	background:url(http://www.jq22.com/img/cs/300x500-9.png) no-repeat;
	background-size:cover;
	float:left;
}
div .beijing {
	width:250px;
	height:439px;
	position:absolute;
	top:56px;
	left:11px;
	border-radius:3px;
}
div p {
	width:250px;
	height:20px;
	position:absolute;
	top:49px;
	left:11px;
	color:#812C3A;
	font-size:14px;
	z-index:33;
	font-family:"arial,helvetica,sans-serif";
	text-align:center;
}
#bottom1 {
	width:250px;
	height:62px;
	position:absolute;
	left:11px;
	bottom:55px;
	background:#F78AA1;
	z-index:99;
}
#bottom2 {
	width:250px;
	height:62px;
	position:absolute;
	left:11px;
	bottom:55px;
	background:#F78AA1;
	z-index:99;
}
#top1 {
	width:250px;
	height:346px;
	position:absolute;
	left:11px;
	top:88px;
	z-index:99;
	overflow:auto;
}
#top2 {
	width:250px;
	height:346px;
	position:absolute;
	left:11px;
	top:88px;
	z-index:99;
	overflow:auto;
}
textarea {
	resize:none;
	width:180px;
	height:30px;
	padding-left:2px;
	margin:16px 6px 0px 7px;
	border:1px solid #D2627A;
	border-radius:6px;
	line-height:30px;
	color:#333;
	font-family:"arial,helvetica,sans-serif";
	font-size:13px;
}
input {
	width:48px;
	height:25px;
	float:right;
	margin:21px 3px 0px 0px;
	border-radius:11px;
	background:none;
	border:1px solid #D2627A;
	color:white;
}

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

模拟qq聊天(原创)

6
      comfortable0
      2019/7/30 10:52:03
      我想说的也是3楼描述的这个问题 0.0 回复
      飞鸟生活0
      2019/5/9 23:53:53
      jiyahua0
      2019/5/9 14:55:29
      mike86250
      2019/5/9 8:36:13
      两边的聊天界面 应该是自己发完,消息显示在自己界面的右边, 对方显示在左边,不应该两边都是一致的
          Fairy°演绎0
          2019/5/14 10:57:08
          qq是这样的啊
          0
          2019/5/25 11:20:34
          qq的界面是:自己发送的消息在自己的界面的右端,对方的消息在左端 你设计的第一个是自己发送的消息在左端,别人发送的消息在右端
      回复