今天520了，我用HTML5 + CSS3模拟了西门庆、武大郎和潘金莲的精彩微信聊天，希望你看完以后可以在紧张的工作中，放松一下，开心一下，同时祝你在这个520可以过得开心快乐。
目录
1 实现思路
1.1 聊天实现素材
1.2 HTML布局的素材准备
2 聊天内容的精心打造
2.1 金莲心思的第一次改变
2.2 金莲决定与门庆说明情况
2.3 精彩大反转
3 完整源代码
1 实现思路
1.1 聊天实现素材
- 头像图片3个
- 聊天内容图片4个
- 聊天表情图片1个
- 聊天HTML页面3个
1.2 HTML布局的素材准备
布局过程需要搭建聊天窗口框架，顶部聊天对象，按键设置，等：
- 聊天窗口顶部布局
- 聊天区域布局
- 右侧都是发送者
- 左侧为其他人
- 区分发送对象，用CSS模拟小三角来实现
- 发送图片，避免宽高扩张的css设置
2 聊天内容的精心打造
为了结合HTML5 + CSS3的学习，使学习起来更有意思，所以在520精心准备了这段模拟微信聊天记录，所以源代码稍后会给出，你可以开心的看一下聊天内容，一起来看一下吧
2.1 金莲心思的第一次改变
我们知道，金莲的心思不在大郎这里了，我们看大郎如何唤醒金莲的心
2.2 金莲决定与门庆说明情况
在金莲知道了大郎的好之后，决定一起好好过日子，所以决定说明事情，但事情似乎有反转
2.3 精彩大反转
当我们以为金莲又反转，回心转意后，没想到金莲拉起来群聊，这时候，你是否相信了爱情呢
3 完整源代码
这篇博客的源代码分为3部分，分别是3个聊天窗口的记录，图片素材你可以自己去找一找，也可以跟我私信要，很有意思的
第一部分聊天代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5+CSS3的模拟微信窗口</title>
<style>
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
}
</style>
</head>
<body>
<div class="chat-box">
<div class="head">
<div class="back"></div>
<div class="title">大郎</div>
<div class="opera-point">...</div>
</div>
<div class="char-body">
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
媳妇，我今天身体不适，不能出去卖炊饼了
</div>
</div>
<div class="me-people-li">
<img src="./jinlian.png" class="head-photo" />
<div class="word">
大郎，我知道，你该吃药了
</div>
</div>
<div class="me-people-li">
<img src="./jinlian.png" class="head-photo" />
<div class="word">
<img src="yaotang.png" />
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
这一看就是鹤顶红啊，我不喝
</div>
</div>
<div class="me-people-li">
<img src="./jinlian.png" class="head-photo" />
<div class="word">
大郎，喝了吧，这只是单纯的一碗红糖水
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
金莲，我知道你最想想买车
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
我卖炊饼攒了20万，刚好够买一辆全新Mini
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
今天520了，我现给你发个红包吧
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
<img src="520.png" />
</div>
</div>
<div class="me-people-li">
<img src="./jinlian.png" class="head-photo" />
<div class="word">
大郎，其实我有件事想跟你说
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
媳妇，你别说，我都懂
</div>
</div>
<div class="me-people-li">
<img src="./jinlian.png" class="head-photo" />
<div class="word">
<img src="haixiu.png" />
</div>
</div>
</div>
</div>
</body>
</html>群聊聊天代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5+CSS3的三者精彩群聊</title>
<style>
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
}
</style>
</head>
<body>
<div class="chat-box">
<div class="head">
<div class="back"></div>
<div class="title">群聊（3）</div>
<div class="opera-point">...</div>
</div>
<div class="char-body">
<div class="me-people-li">
<img src="./jinlian.png" class="head-photo" />
<div class="word">
@大郎 @庆哥 这里
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
刚才的药劲儿真是大
</div>
</div>
<div class="other-people-li">
<img src="./menqing.png" class="head-photo" />
<div class="word">
为什么要拉个群？
</div>
</div>
<div class="me-people-li">
<img src="./jinlian.png" class="head-photo" />
<div class="word">
我思考了很久
</div>
</div>
<div class="me-people-li">
<img src="./jinlian.png" class="head-photo" />
<div class="word">
我们3个为什么不能融洽的生活呢？
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
你知不知道我弟弟是谁？
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
你看见这只老虎没？
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
<img src="laohu.png" />
</div>
</div>
<div class="other-people-li">
<img src="./menqing.png" class="head-photo" />
<div class="word">
我知道，你弟弟很厉害
</div>
</div>
<div class="other-people-li">
<img src="./menqing.png" class="head-photo" />
<div class="word">
但，你弟弟回来打我之前，我就会打你
</div>
</div>
<div class="other-people-li">
<img src="./menqing.png" class="head-photo" />
<div class="word">
来，今天520了，给你发个红包
</div>
</div>
<div class="other-people-li">
<img src="./menqing.png" class="head-photo" />
<div class="word">
<img src="520.png" />
</div>
</div>
<p class="time">大郎已收取红包</p>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
别想520元的红包就收买我，我弟弟打你
</div>
</div>
<div class="other-people-li">
<img src="./menqing.png" class="head-photo" />
<div class="word">
<img src="520.png" />
</div>
</div>
<div class="other-people-li">
<img src="./menqing.png" class="head-photo" />
<div class="word">
<img src="520.png" />
</div>
</div>
<div class="other-people-li">
<img src="./menqing.png" class="head-photo" />
<div class="word">
刚才给金莲发了1个，现在给你发3个，没有了啊
</div>
</div>
<p class="time">大郎已收取红包</p>
<p class="time">大郎已收取红包</p>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
哈哈，中午咱们3个整点
</div>
</div>
<div class="other-people-li">
<img src="./dalang.png" class="head-photo" />
<div class="word">
<img src="jirou.png" />
</div>
</div>
<p class="time">群主将群名改为“520一家亲”</p>
</div>
</div>
</body>
</html>看到这里，你是否学习了HTML5 + CSS3知识，也顺便着读完博客，开心的笑了一下呢，我准备了非常不错的投票，投一下吧，投一下更开心。
