您的位置：首页 > Web前端

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

2016-12-24 18:02 120 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端

相关文章推荐

新的分享

章节导航