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

攻城狮小趙

于 2016-12-24 18:02:16 发布

阅读量1.3k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/u013390913/article/details/53861403

版权

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

摘要由CSDN通过智能技术生成

当页面需要进行展示对话聊天信息时,好的布局会让人赏心悦目.下面直接看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;

最低0.47元/天解锁文章