需要做个聊天样式的对话框，找了半天，终于找到一个比较好的样式，就像当前的手机短信对话框类似的下面贴出相关的代码：
1.css部分代码：
.chat_message,p {
margin: 0;
padding: 0;
}
p{
margin-left: 1px;
}
//左侧div对话框样式
.div1,.div2,.div3 {
display: inline-block; #
display: inline; #
zoom: 1;
position: relative;
border-style: solid;
border-color: black;
zoom: 1;
}
.div1 {
margin-top: 5px;
margin-left: 10px;
border-width: 1px;
}
.div2,.div3 { #
left: -2px;
border-width: 0 1px;
background-color: #E3F790;
}
.div2 {
margin: 0 -2px;
}
.div3 {
width: auto;
margin: 1px -2px;
padding: 0 6px;
line-height: 1.5;
margin: 1px -2px;
}
.pointer1,.pointer2 {
position: absolute;
top: 7px;
width: 0;
height: 0;
overflow: hidden;
border-top: 6px transparent dotted;
border-bottom: 6px transparent dotted;
}
.pointer1 {
left: -9px;
border-right: 6px black solid;
}
.pointer2 {
left: -8px;
border-right: 6px #E3F790 solid;
}
//右侧div对话框样式
.diva,.divb,.divc {
margin-right: 5px;
display: inline-block; #
display: inline; #
zoom: 1;
position: relative;
border-style: solid;
border-color: black;
zoom: 1;
}
.diva {
margin-top: 5px;
margin-right: 10px;
border-width: 1px;
}
.divb,.divc { #
left: -2px;
border-width: 0 1px;
background-color: #E8F4F1;
}
.divb {
margin: 0 -2px;
}
.divc {
width: auto;
margin: 1px -2px;
padding: 0 6px;
line-height: 1.5;
}
.pointera,.pointerb {
position: absolute;
top: 7px;
width: 0;
height: 0;
overflow: hidden;
border-top: 6px transparent dotted;
border-bottom: 6px transparent dotted;
top: 7px;
}
.pointera {
right: -9px;
border-left: 6px black solid;
}
.pointerb {
right: -8px;
border-left: 6px #E8F4F1 solid;
}
2.html
<html>
<head></head>
<div id="main_body"
style="position: absolute; top: 40px; left: 50px; width: 900px; height: 600px; overFlow: auto; background-color: #F4F9F9; border:solid 1px #F9F94B; scrollbar-face-color: #ffd700; scrollbar-shadow-color: #e0ffff; scrollbar-highlight-color: #fa8072; scrollbar-3dlight-color: #ff0000; scrollbar-darkshadow-color: #afeeee; scrollbar-track-color: #ffb6c1; scrollbar-arrow-color: #e6e6fa;"
align="left">
<div align="left" id="outputArea"
style="overflow: visible; font-size: 14px; height: auto">
<div class='chat_message' align='left'><div class='div1'><div class='div2'>"
<div class='div3'><p align='left'>
请求
</p></div></div><div class='pointer1'></div><div class='pointer2'></div> </div></div>
<div class='chat_message' align='right'><div class='diva' ><div class='divb'>
<div class='divc'><p align='left'>
回复
</p></div></div><div class='pointera'></div><div class='pointerb'></div> </div></div>
</div>
</div>
</html>
代码有点乱，基本样式实现了。有兴趣的可以看看
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
