前端百科---Web聊天排版

最新推荐文章于 2025-06-13 18:00:35 发布

原创最新推荐文章于 2025-06-13 18:00:35 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文探讨了如何在前端开发中创建吸引人的聊天界面布局。通过实例演示，展示了如何实现一个美观的Web聊天排版，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当页面需要进行展示对话聊天信息时,好的布局会让人赏心悦目.下面直接看demo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
html, body, div, img, span {
	padding: 0;
	margin: 0;
}
.clearfix {
	display: block;
	zoom: 1;
	overflow: hidden;
}
#container {
	height: 600px;
	width: 500px;
	border: 1px solid grey;
	overflow-y: auto;

}
.message {
	margin-bottom: 10px;
}
.content-time {
	text-align: center;
	margin: 10px auto;
}
.content-time-span {
	display: inline-block;
	padding: 1px 10px;
	background: #dcdcdc;
	color: #fff;
	border-radius: 2px;
}
.pic {
	float: right;
	width: 40px;
	height: 40px;
}
.pic-left {
	float: left;
	width: 40px;
	height: 40px;
}
.text-style {
	text-align: right;
}
.text-style-left {
	text-align: left;
}
.pos, .pos-left {
	margin: 0 10px;
	display: inline-block;
	position: relative;
}
.pos:after {
    content: "";
    position: absolute;
    top: 14px;
    left: 100%;
    border-top: 5px solid transparent;
    border-left: 6px solid #b2e281;
    border-bottom: 5px solid transparent;
}
.pos-left:before {
	content: "";
    position: absolute;
    top: 14px;
    right: 100%;
    border-top: 5px solid transparent;
    border-right: 6px solid #b2e281;
    border-bottom: 5px solid transparent;
}
.bubble {
	text-align: left;
	max-width: 400px;
	min-height: 40px;
	display: inline-block;
	vertical-align: top;
	background: #b2e281;
	border-radius: 3px;
}
.plain {
	padding: 9px 13px;
	font-size: 14px;
}

</style>
</head>
<body>
	<div id="container" class="clearfix"> <!-- 对话总框 -->

		<div class="message clearfix"> <!-- 每条对话总框 -->
			<p class="content-time"><span class="content-time-span">15:44</span></p> <!-- 对话时间 -->
			<img class="pic" src="C:\Users\zhaoxiaoran\Desktop\WWW\20141001002009_3VEmX.jpeg">
			<div class="text-style">
				<div class="pos">
					<div class="bubble">
						<div class="plain">我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息</div>
					</div>
				</div>
			</div>
		</div>

		<div class="message clearfix"> <!-- 每条对话总框 -->
			<p class="content-time"><span class="content-time-span">15:44</span></p> <!-- 对话时间 -->
			<img class="pic-left" src="C:\Users\zhaoxiaoran\Desktop\WWW\20141001002009_3VEmX.jpeg">
			<div class="text-style-left">
				<div class="pos-left">
					<div class="bubble">
						<div class="plain">我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息</div>
					</div>
				</div>
			</div>
		</div>

		<div class="message clearfix"> <!-- 每条对话总框 -->
			<p class="content-time"><span class="content-time-span">15:44</span></p> <!-- 对话时间 -->
			<img class="pic" src="C:\Users\zhaoxiaoran\Desktop\WWW\20141001002009_3VEmX.jpeg">
			<div class="text-style">
				<div class="pos">
					<div class="bubble">
						<div class="plain">我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息我是发送的信息</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

效果图: