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

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

                </div>  
                <table class="msg" cellspacing="0" cellpadding="0"><tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr><tr><td class="lm"></td><td class="mm">你好,我是stoneniqiu</td><td class="rm"><span></span></td></tr><tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td><td class="time"></td><td></td></tr></tbody></table>  
            </div>  

样式:

CSS Code复制内容到剪贴板

.jimi_lists {   
    margin: 0 -10px 20px 10px;   
    position: relative;   
}   
 .jimi_lists .header_img.jimi3 {   
    background: url(../img/jimi_50_3.png) no-repeat 0 0;   
}   
 .jimi_lists .header_img {   
    width: 50px;   
    height: 50px;   
    position: absolute;   
    top: 0;   
    left: 0;   
}   
.fl {   
    float: left;   
}   
 .jimi_lists .msg {   
    margin-left: 59px;   
    margin-right: 40px;   
    margin-top: 2px;   
    float: left;   
    display: inline;   
}   
 .jimi_lists .lt {   
    background: url(../img/msg_bg_lr.png) no-repeat 0 0;   
    width: 26px;   
    height: 10px;   
}   
 .jimi_lists .tt {   
    background: url(../img/msg_bg_tb.png) repeat-x 0 -23px;   
    height: 10px;   
}   
.jimi_lists .rt {