HTML5 + CSS3模拟西门庆、武大郎和潘金莲的精彩520微信聊天，看完我又相信爱情了_html 微信聊天

今天520了，我用HTML5 + CSS3模拟了西门庆、武大郎和潘金莲的精彩微信聊天，希望你看完以后可以在紧张的工作中，放松一下，开心一下，同时祝你在这个520可以过得开心快乐。

目录

1 实现思路

1.1 聊天实现素材

1.2 HTML布局的素材准备 

2 聊天内容的精心打造 

2.1 金莲心思的第一次改变

2.2  金莲决定与门庆说明情况

2.3 精彩大反转 

3 完整源代码 

1 实现思路

1.1 聊天实现素材

1. 头像图片3个
2. 聊天内容图片4个
3. 聊天表情图片1个
4. 聊天HTML页面3个

1.2 HTML布局的素材准备 

布局过程需要搭建聊天窗口框架，顶部聊天对象，按键设置，等：

1. 聊天窗口顶部布局
2. 聊天区域布局
3. 右侧都是发送者
4. 左侧为其他人
5. 区分发送对象，用CSS模拟小三角来实现
6. 发送图片，避免宽高扩张的css设置

2 聊天内容的精心打造 

为了结合HTML5 + CSS3的学习，使学习起来更有意思，所以在520精心准备了这段模拟微信聊天记录，所以源代码稍后会给出，你可以开心的看一下聊天内容，一起来看一下吧

2.1 金莲心思的第一次改变

我们知道，金莲的心思不在大郎这里了，我们看大郎如何唤醒金莲的心

2.2  金莲决定与门庆说明情况

在金莲知道了大郎的好之后，决定一起好好过日子，所以决定说明事情，但事情似乎有反转

2.3 精彩大反转 

当我们以为金莲又反转，回心转意后，没想到金莲拉起来群聊，这时候，你是否相信了爱情呢

3 完整源代码 

 这篇博客的源代码分为3部分，分别是3个聊天窗口的记录，图片素材你可以自己去找一找，也可以跟我私信要，很有意思的

第一部分聊天代码：

     html, body, * { margin: 0; padding: 0; font-size: 14px; font-family: Microsoft Yahei; } .chat-box { width: 375px; height: 667px; background: #000; } .head { position: fixed; top: 0; left: 0; height: 40px; width: 375px; } .head .back { position: absolute; height: 40px; width: 40px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzRCQTEyN0IzOTcwMTFFODk1OEZCOEVCMEE2QUU1NkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzRCQTEyN0MzOTcwMTFFODk1OEZCOEVCMEE2QUU1NkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NEJBMTI3OTM5NzAxMUU4OTU4RkI4RUIwQTZBRTU2RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NEJBMTI3QTM5NzAxMUU4OTU4RkI4RUIwQTZBRTU2RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PulQWg8AAAF/SURBVHja7Ni9SsRAEAfwnd1wldiIlqK1td4LiL7CFQaFCHZWgmVqH+GK4FejryA+gPcA9vZ2YnVkd5yAcBLOYJKZ3UWyRbIchPsxSzb/HUBEFfPQKvIxAP89MGn7wPHpuTLOtXoGMdl1WF4rUBug9cX25tpdnufRVHBssXxGhTu0Y6yjs1P6bRTLEo9Lp56ohquLasKcbk5sifvgAMBRRc5oWoau4FIcfRJOaPoQ+i1uwt2H3mZYcdxAdhwnUATHBRTDcQBFcX2B4rg+QC+4rsA9X7gunzpQ1j7S3QuudQWz7HKFjjBbNXNR4QhaYcMCi+LqkwxvtbSX0SWNJVGjAZhQ1T4W8Qk11e2GpkexRP5ZotVBHUmXWwlk122mCZnGAPwV+b3caQxAL0iOsCCK5IpbYkjOwCqC5I787EiJQxMrUurY2YScxNI8Woq0qKZtUpR062NmQB/+RALgqM3/+mgevRhI9imMvVIcewdtqtbH/M8BdOhRD8DA40uAAQDL2thNJDxLvAAAAABJRU5ErkJggg==) no-repeat; background-size: 80%; background-position: center; } .head .title { margin: 0 70px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .head .opera-point { position: absolute; top: 12px; right: 12px; width: 40px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAMCAYAAAG2I8urAAAAAXNSR0IArs4c6QAAAddJREFUSA3VVr1OwzAQto0oqgQPABszD4BY4TVIfwR0aBgQb8ALIAbSoVD1J7wGrFRiAokVsbGwMSAVCXPn4PSSxklMGol6SM539913/jnbjEFzGu0j/GOTUvJACr5Owx0L5SBZVxtqDffbqbel7gNqG6K441ABglN3PyJ9YBHKk2qZXNVdzcJVJAwJzR92IvmgjlLH7RSrBhNPAwPohs508FqPf5wIjQVhOtg0xrgNA1GsQIW5yZ7ZFrVwTA+XIaLm/M4feHsRXUKnDOzSy+s7Lnclxrf59PhwFtPNdMvACn/orTGYEcpWXals0L5JLgOrtnGwx/k54+x51L/c4ZxPq8iUza9+3liss1vY57uUdzTwRJ6kysDi6RBJBhOrNY/vaYJGuQRscrlKtmVMIstQEJucEJenWbxGe0GsmKkodQZ1royExFAGVlVZq3Wy/jn5uknaT4ofkqxWlve73Ys3kk9hcRF4oerhtieXeeqoOWv5g3yrmRoHjIvCC6cQnM95m41vVkybWDa+c+YVeHllxQztNr4hyCDYxLLxNdCFaptY4CvwZo8/PcJgVIBzSPlSXQF5UXjDF716iTbdQ8b4AZxJwb2qZlv2Rn3vOs9L5C/z9d95fwDELzC7i+rQHQAAAABJRU5ErkJggg==) no-repeat; background-size: 80%; background-position: center; } .char-body { width: 375px; height: 587px; overflow-y: auto; position: absolute; top: 40px; } .char-body::-webkit-scrollbar {  display: none; } .other-people-li, .me-people-li { display: flex; margin-top: 20px; } .me-people-li { position: relative; display: flex; flex-direction: row-reverse; margin-top: 20px; } .me-people-li .error-icon { position: absolute; left: 54px; top: 10px; width: 30px; } .other-people-li .head-photo { margin-left: 12px; width: 50px; height: 50px; vertical-align: top; border-radius: 6px; } .me-people-li .head-photo { margin-right: 12px; width: 50px; height: 50px; vertical-align: top; border-radius: 6px; } .me-people-li .word { display: inline-block; padding: 15px; background: #a1e75c; color: #000; margin-right: 10px; border-radius: 10px; } .other-people-li .word { display: inline-block; max-width: 54%; padding: 15px; background: #302b2f; color: #EEEfFF; margin-left: 10px; border-radius: 10px; } .other-people-li .word img, .me-people-li .word img{ max-width: 188px; } .me-people-li .word::before { display: block; content: \'\'; width: 0; height: 0; border-left: #a1e75c 10px solid; border-top: transparent 10px solid; border-bottom: transparent 10px solid; position: absolute; right: 64px; } .other-people-li .word::before { display: block; content: \'\'; width: 0; height: 0; border-right: #302b2f 10px solid; border-top: transparent 10px solid; border-bottom: transparent 10px solid; position: absolute; margin-left: -22px; } .into-box { margin-bottom: 20px; padding-right: 74px; text-align: right; } .into-box span { display: inline-block; margin-top: 8px; padding: 2px 6px; background: #CCC; border-radius: 4px; color: #898989; } .emo1 { width: 30px; height: 24px; position: relative; top: 7px; } .time { color: #FFF; text-align: center; line-height: 80px }    
 
 
 
大郎
 
...
 
 
 
    
 媳妇，我今天身体不适，不能出去卖炊饼了  
 
 
    
 大郎，我知道，你该吃药了  
 
 
    
   
 
 
    
 这一看就是鹤顶红啊，我不喝  
 
 
    
 大郎，喝了吧，这只是单纯的一碗红糖水  
 
 
    
 金莲，我知道你最想想买车  
 
 
    
 我卖炊饼攒了20万，刚好够买一辆全新Mini  
 
 
    
 今天520了，我现给你发个红包吧  
 
 
    
   
 
 
    
 大郎，其实我有件事想跟你说  
 
 
    
 媳妇，你别说，我都懂  
 
 
    
   
 
 
 
 

 群聊聊天代码：

     html, body, * { margin: 0; padding: 0; font-size: 14px; font-family: Microsoft Yahei; } .chat-box { width: 375px; height: 667px; background: #000; } .head { position: fixed; top: 0; left: 0; height: 40px; width: 375px; } .head .back { position: absolute; height: 40px; width: 40px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzRCQTEyN0IzOTcwMTFFODk1OEZCOEVCMEE2QUU1NkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzRCQTEyN0MzOTcwMTFFODk1OEZCOEVCMEE2QUU1NkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NEJBMTI3OTM5NzAxMUU4OTU4RkI4RUIwQTZBRTU2RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NEJBMTI3QTM5NzAxMUU4OTU4RkI4RUIwQTZBRTU2RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PulQWg8AAAF/SURBVHja7Ni9SsRAEAfwnd1wldiIlqK1td4LiL7CFQaFCHZWgmVqH+GK4FejryA+gPcA9vZ2YnVkd5yAcBLOYJKZ3UWyRbIchPsxSzb/HUBEFfPQKvIxAP89MGn7wPHpuTLOtXoGMdl1WF4rUBug9cX25tpdnufRVHBssXxGhTu0Y6yjs1P6bRTLEo9Lp56ohquLasKcbk5sifvgAMBRRc5oWoau4FIcfRJOaPoQ+i1uwt2H3mZYcdxAdhwnUATHBRTDcQBFcX2B4rg+QC+4rsA9X7gunzpQ1j7S3QuudQWz7HKFjjBbNXNR4QhaYcMCi+LqkwxvtbSX0SWNJVGjAZhQ1T4W8Qk11e2GpkexRP5ZotVBHUmXWwlk122mCZnGAPwV+b3caQxAL0iOsCCK5IpbYkjOwCqC5I787EiJQxMrUurY2YScxNI8Woq0qKZtUpR062NmQB/+RALgqM3/+mgevRhI9imMvVIcewdtqtbH/M8BdOhRD8DA40uAAQDL2thNJDxLvAAAAABJRU5ErkJggg==) no-repeat; background-size: 80%; background-position: center; } .head .title { margin: 0 70px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .head .opera-point { position: absolute; top: 12px; right: 12px; width: 40px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAMCAYAAAG2I8urAAAAAXNSR0IArs4c6QAAAddJREFUSA3VVr1OwzAQto0oqgQPABszD4BY4TVIfwR0aBgQb8ALIAbSoVD1J7wGrFRiAokVsbGwMSAVCXPn4PSSxklMGol6SM539913/jnbjEFzGu0j/GOTUvJACr5Owx0L5SBZVxtqDffbqbel7gNqG6K441ABglN3PyJ9YBHKk2qZXNVdzcJVJAwJzR92IvmgjlLH7RSrBhNPAwPohs508FqPf5wIjQVhOtg0xrgNA1GsQIW5yZ7ZFrVwTA+XIaLm/M4feHsRXUKnDOzSy+s7Lnclxrf59PhwFtPNdMvACn/orTGYEcpWXals0L5JLgOrtnGwx/k54+x51L/c4ZxPq8iUza9+3liss1vY57uUdzTwRJ6kysDi6RBJBhOrNY/vaYJGuQRscrlKtmVMIstQEJucEJenWbxGe0GsmKkodQZ1royExFAGVlVZq3Wy/jn5uknaT4ofkqxWlve73Ys3kk9hcRF4oerhtieXeeqoOWv5g3yrmRoHjIvCC6cQnM95m41vVkybWDa+c+YVeHllxQztNr4hyCDYxLLxNdCFaptY4CvwZo8/PcJgVIBzSPlSXQF5UXjDF716iTbdQ8b4AZxJwb2qZlv2Rn3vOs9L5C/z9d95fwDELzC7i+rQHQAAAABJRU5ErkJggg==) no-repeat; background-size: 80%; background-position: center; } .char-body { width: 375px; height: 587px; overflow-y: auto; position: absolute; top: 40px; } .char-body::-webkit-scrollbar {  display: none; } .other-people-li, .me-people-li { display: flex; margin-top: 20px; } .me-people-li { position: relative; display: flex; flex-direction: row-reverse; margin-top: 20px; } .me-people-li .error-icon { position: absolute; left: 54px; top: 10px; width: 30px; } .other-people-li .head-photo { margin-left: 12px; width: 50px; height: 50px; vertical-align: top; border-radius: 6px; } .me-people-li .head-photo { margin-right: 12px; width: 50px; height: 50px; vertical-align: top; border-radius: 6px; } .me-people-li .word { display: inline-block; padding: 15px; background: #a1e75c; color: #000; margin-right: 10px; border-radius: 10px; } .other-people-li .word { display: inline-block; max-width: 54%; padding: 15px; background: #302b2f; color: #EEEfFF; margin-left: 10px; border-radius: 10px; } .other-people-li .word img, .me-people-li .word img{ max-width: 188px; } .me-people-li .word::before { display: block; content: \'\'; width: 0; height: 0; border-left: #a1e75c 10px solid; border-top: transparent 10px solid; border-bottom: transparent 10px solid; position: absolute; right: 64px; } .other-people-li .word::before { display: block; content: \'\'; width: 0; height: 0; border-right: #302b2f 10px solid; border-top: transparent 10px solid; border-bottom: transparent 10px solid; position: absolute; margin-left: -22px; } .into-box { margin-bottom: 20px; padding-right: 74px; text-align: right; } .into-box span { display: inline-block; margin-top: 8px; padding: 2px 6px; background: #CCC; border-radius: 4px; color: #898989; } .emo1 { width: 30px; height: 24px; position: relative; top: 7px; } .time { color: #FFF; text-align: center; line-height: 80px }    
 
 
 
群聊（3）
 
...
 
 
 
    
 @大郎 @庆哥 这里  
 
 
    
 刚才的药劲儿真是大  
 
 
    
 为什么要拉个群？  
 
 
    
 我思考了很久  
 
 
    
 我们3个为什么不能融洽的生活呢？  
 
 
    
 你知不知道我弟弟是谁？  
 
 
    
 你看见这只老虎没？  
 
 
    
   
 
 
    
 我知道，你弟弟很厉害  
 
 
    
 但，你弟弟回来打我之前，我就会打你  
 
 
    
 来，今天520了，给你发个红包  
 
 
    
   
 
 
大郎已收取红包
 
    
 别想520元的红包就收买我，我弟弟打你  
 
 
    
   
 
 
    
   
 
 
    
 刚才给金莲发了1个，现在给你发3个，没有了啊  
 
 
大郎已收取红包
 
大郎已收取红包
 
    
 哈哈，中午咱们3个整点  
 
 
    
   
 
 
群主将群名改为“520一家亲”
 
 
 

看到这里，你是否学习了HTML5 + CSS3知识，也顺便着读完博客，开心的笑了一下呢，我准备了非常不错的投票，投一下吧，投一下更开心。