QQ聊天气泡

来源：互联网发布：网页开发是java还是php 编辑：程序博客网时间：2024/04/29 07:03

QQ聊天气泡

效果图

这里写图片描述

HTML代码

这里写图片描述

CSS代码

#chat-list {    max-height:270px;    margin: 20px 0;    padding: 0 10px;        overflow: hidden;    overflow-y: auto;}.msg-wrap{    margin: 10px 0;    clear: both;}.msg-wrap:before, .msg-wrap:after {    clear: both;    content: "";    display: table;}.msg-wrap .header{    width: 29px ;    height: 29px;    border: 1px solid #ccc;    vertical-align: middle;}.msg-wrap.left .header{    float: left;}.msg-wrap.right .header{    float: right;}.msg {    max-width: 50%;    font-size:13px;    letter-spacing: 1px;    border-radius: 5px;    padding: 8px 5px;    position: relative;    word-wrap: break-word;    word-break: normal;}.left .msg {    color:#fff;    float: left;    background:#349b63;    margin-left: 12px;}.left .msg .trigon {  top:5px;  left: -15px;  border-color:transparent #349b63 transparent transparent;}.right .msg {    float: right;    background:#ddd;    margin-right: 12px;}.right .msg .trigon {  top:5px;  right: -15px;  border-color:transparent transparent transparent #ddd;}.trigon {  width:0;  height:0;  border-width:10px;  border-style:solid;  position: absolute;  z-index:-1;}

结尾

只为记录，只为分享! 愿所写能对你有所帮助。Good Good Study, Day Day Up!

0 0