先看效果图：
在这里插入图片描述
html代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>QQ聊天对话窗口</title>
<meta http-equiv="Refresh" content="8">
<meta name="Keywords" content="聊天小程序，聊天style。"/>
<meta name="Description" content="聊天愉快,有空常聊天。"/>
<link rel="stylesheet" href="css/style_1.css">
<link rel="stylesheet" href="css/style_2.css">
</head>
<body>
	<div class="h">
			<div class="h_1"><img src="images/boy-head_03.gif" alt="男生头像"></div>
			<div class="h_2"><div>&nbsp;&nbsp;今晚吃什么呢</div></div>       <!--男生聊天对话-->
			<div class="h_3"><div>&nbsp;&nbsp;?</div></div>                                   <!--女生聊天对话--> 
			<div class="h_4"><img src="images/belle-head_12.gif" alt="女生头像"></div>	
			<div class="h_1"><img src="images/boy-head_03.gif" alt="男生头像"></div>
			<div class="h_2"><div>&nbsp;&nbsp;我请你吃饭</div></div>   <!--男生聊天对话-->
			<div class="h_3"><div>&nbsp;&nbsp;哇，开森，我要吃回锅肉</div></div>                                   <!--女生聊天对话-->
			<div class="h_4"><img src="images/belle-head_12.gif" alt="女生头像"></div>
			<div class="h_1"><img src="images/boy-head_03.gif" alt="男生头像"></div>
			<div class="h_2"><div>&nbsp;&nbsp;可以，但是要先给钱</div></div>                      <!--男生聊天对话-->
			<div class="h_3"><div>&nbsp;&nbsp;再见</div></div>                 <!--女生聊天对话-->
			<div class="h_4"><img src="images/belle-head_12.gif" alt="女生头像"></div>                        
</div>
</body>
</html>

style2.css代码如下：

/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
ul,li,ol{
	letter-spacing: none;
}
a{
	text-decoration: none;
}
img{
	border: 0;
}
body{
	font-size: 12px;
	font-family: Arial,"微软雅黑","宋体";
}
.clears{
	clear: both; /*清除浮动*/
    height: 0;   /*标签高度为0*/
    line-height: 0;   /*文本高度为0*/
    overflow: hidden; /*超出隐藏*/
    font-size:0; /*字体大小为0*/
}

style1.css代码如下：

/*border正在学习的路上*/
.h{
	width: 800px;
	height: 600px;
	padding-top: 48px;
	background:rgba(255,255,255,1.00);
	margin-left: auto;
	margin-right: auto;
}
.h_1{
	margin-left:33px;
	float: left;
}
.h_2{
	width: 660px;
	height: 62px;
	margin-right:24px;
	margin-left:23px;
	float: right;
	background: url(../images/boy-dialog-box_05.gif);    /*男生聊天对话框*/ 
	line-height: 60px;
	color: #FFFFFF;
	font-size: 20px;
	font-family: Arial "微软雅黑","宋体","华文行楷","方正仿宋_GBK";
}
.h_3{
	width: 660px;
	height: 62px;
	margin-left:28px;
	margin-right:28px;
	float:left;
	background: url(../images/belle-dialog-box_11.gif);     /*女生聊天对话框*/ 
	margin-top: 24px;
	margin-bottom: 24px;
	line-height: 60px;
	color: #FFFFFF;
	font-size: 20px;
	font-family: Arial "微软雅黑","宋体","华文行楷","方正仿宋_GBK";
}
.h_4{
	margin-right: 24px;
	margin-top: 24px;
	margin-bottom: 24px;
	float: right;
}

images文件如下:
链接：https://pan.baidu.com/s/1d5kXZ2_0A_MNQ2R6B5jILg
提取码：2025

喜欢的朋友记得关注一波哟,后期将会有大量福利送上！

重工黑大帅

发布了30 篇原创文章 · 获赞 72 · 访问量 1万+

私信关注

HCI第二篇：聊天对话窗口

喜欢的朋友记得关注一波哟,后期将会有大量福利送上！

猜你喜欢