div+CSS制作类似微信对话气泡效果的实例总结

2020-05-07 06:37:04易采站长站整理

    background: url(../img/msg_bg_lr.png) no-repeat -35px 0;   
    width: 10px;   
    height: 10px;   
}   
.jimi_lists .lm {   
    background: url(../img/msg_bg_lr.png) repeat-y -94px 0;   
    width: 26px;   
    vertical-align: top;   
    position: relative;   
}   
.jimi_lists .mm {   
    padding: 0 5px;   
    background-color: #FFF;   
    word-break: break-all;   
    word-wrap: break-word;   
    color: #333;   
    line-height: 20px;   
}   
.jimi_lists .lm span {   
    background: url(../img/msg_bg_lr.png) no-repeat 0 -14px;   
    display: inline-block;   
    width: 26px;   
    height: 16px;   
    position: absolute;   
    top: 5px;   
}   
.jimi_lists .rm {   
    background: url(../img/msg_bg_lr.png) repeat-y -113px 0;   
    width: 10px;   
}   
.jimi_lists .lb {   
    background: url(../img/msg_bg_lr.png) no-repeat 0 -43px;   
    width: 10px;   
    height: 10px;   
}   
.jimi_lists .bm {   
    background: url(../img/msg_bg_tb.png) repeat-x 0 -25px;   
    height: 10px;   
}   
.jimi_lists .rb {   
    background: url(../img/msg_bg_lr.png) no-repeat -35px -43px;   
    width: 10px;   
    height: 10px;   
}   
  
.customer_lists {   
    position: relative;   
    margin: 0 12px 20px 20px;   
}   
.customer_lists .msg {   
    float: rightright;