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

今天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个聊天窗口的记录，图片素材你可以自己去找一找，也可以跟我私信要，很有意思的

第一部分聊天代码：

<!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知识，也顺便着读完博客，开心的笑了一下呢，我准备了非常不错的投票，投一下吧，投一下更开心。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/915967.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/915967.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Linux】Linux了解与基本指令（1）

【Linux】Linux了解与基本指令（1）

hello~ 很高兴见到大家! 这次带来的是C中关于Linux基本指令这部分的一些知识点,如果对你有所帮助的话,可否留下你宝贵的三连呢? 个 人 主 页: 默|笙 文章目录一、认识Linux二、操作系统&#xff08;OS&#xff09;三、基本指令1. 目录与普通文件1.1 目录1.2 普通文件2. pwd 与…
阅读更多...
dify 学习笔记

dify 学习笔记

目录 启动项目 浏览器访问&#xff1a; dify删除工作流 代码是开源dify 启动项目 cd E:\project\qwen\dify-main\docker docker compose up -d 浏览器访问&#xff1a; http://127.0.0.1/apps dify删除工作流 右下角&#xff0c;三个点&#xff0c;点击弹出框&#xff0…
阅读更多...
【YOLOv8改进 - 特征融合】FCM：特征互补映射模块 ，通过融合丰富语义信息与精确空间位置信息，增强深度网络中小目标特征匹配能力

【YOLOv8改进 - 特征融合】FCM：特征互补映射模块 ，通过融合丰富语义信息与精确空间位置信息，增强深度网络中小目标特征匹配能力

YOLOv8目标检测创新改进与实战案例专栏 专栏目录： YOLOv8有效改进系列及项目实战目录 包含卷积，主干 注意力，检测头等创新机制 以及 各种目标检测分割项目实战案例 专栏链接: YOLOv8基础解析+创新改进+实战案例 文章目录 YOLOv8目标检测创新改进与实战案例专栏 介绍 摘要 文…
阅读更多...
算法训练营day30 贪心算法④ 重叠问题 452. 用最少数量的箭引爆气球、435. 无重叠区间 、 763.划分字母区间

算法训练营day30 贪心算法④ 重叠问题 452. 用最少数量的箭引爆气球、435. 无重叠区间 、 763.划分字母区间

贪心算法的第四篇博客&#xff0c;主要是重叠问题的练习&#xff0c;思路都较为简单&#xff0c;最后一题可能需要着重思考一下 452. 用最少数量的箭引爆气球 遍历数组&#xff0c;如果存在重叠则减少一支箭&#xff08;不重叠则增加一支箭&#xff09; 重叠的判定&#xff1a…
阅读更多...
Gradio, Streamlit, Dash：AI应用开发的效率之选

Gradio, Streamlit, Dash：AI应用开发的效率之选

在人工智能时代&#xff0c;如何快速将模型原型转化为交互式应用&#xff0c;是许多开发者面临的挑战。Gradio、Streamlit 和 Dash 作为流行的Python框架&#xff0c;各自以其独特的优势&#xff0c;帮助我们高效地构建AI应用界面。本文将深入对比这三大框架的优缺点、适用场景…
阅读更多...
数学基础弱能学好大数据技术吗？

数学基础弱能学好大数据技术吗？

很多同学刚进入大学&#xff0c;一听到“大数据”“数据分析”这些词&#xff0c;就觉得必须得是数学大佬才能玩得转。高数线代概率论&#xff0c;光听名字就头大&#xff0c;更别说那些复杂的公式和推导了。但事实真的是这样吗&#xff1f;数学不好&#xff0c;就不能学大数据…
阅读更多...
子进程信号处理

子进程信号处理

SIGCHLD 信号详解‌‌一、信号定义与作用‌‌SIGCHLD‌ 是 UNIX/Linux 系统中由内核向父进程发送的信号&#xff0c;用于通知子进程的状态变化&#xff08;如终止、停止或恢复&#xff09;‌。其主要作用包括&#xff1a;‌回收子进程资源‌&#xff1a;避免子进程终止后成为僵…
阅读更多...
WPF 项目设置应用程序图标和设置程序集图标

WPF 项目设置应用程序图标和设置程序集图标

在 WPF 项目中更改生成的可执行文件&#xff08;.exe&#xff09;图标需要完成两个关键步骤&#xff1a;设置应用程序图标和设置程序集图标。以下是详细操作指南&#xff1a; 第一步&#xff1a;准备图标文件 准备一个 .ico 格式的图标文件&#xff08;必须使用 ICO 格式&…
阅读更多...
JMeter压测黑马点评优惠券秒杀的配置及请求爆红问题的解决(详细图解)

JMeter压测黑马点评优惠券秒杀的配置及请求爆红问题的解决(详细图解)

目录 一、前言 二、优惠券秒杀压测配置 三、已配置token但是请求全部爆红的问题 四、配置JSON断言后的效果 一、前言 在学习黑马点评优惠券秒杀功能的压力测试时&#xff0c;由于老师没有任何引导而是直接开始测试&#xff0c;所以本博客记录一下JMeter压测黑马点评优惠券秒…
阅读更多...
Nginx 运维实战: 什么是反向代理，如何配置?

Nginx 运维实战: 什么是反向代理，如何配置?

在互联网的庞大架构中&#xff0c;Nginx 作为一款高性能的 Web 服务器和反向代理服务器&#xff0c;发挥着至关重要的作用。其中&#xff0c;反向代理功能更是 Nginx 被广泛应用的核心原因之一。本文将深入探讨什么是反向代理&#xff0c;以及如何在 Nginx 中进行反向代理的配置…
阅读更多...
短视第三套多功能主题3.0二开模板苹果CMS插件重构版

短视第三套多功能主题3.0二开模板苹果CMS插件重构版

这款短视第三套多功能主题二开模板苹果CMS插件重构版源码&#xff0c;基于市面上现有的二开版本进行的重制修正更新。目前已经完美适配新版 4049 以上的苹果Cms系统&#xff0c;无需担心因系统版本问题导致的不兼容情况。​主题插件重构后支持一键启动插件自动安装模板&#xf…
阅读更多...
详解力扣高频SQL50题之1148. 文章浏览 I【入门】

详解力扣高频SQL50题之1148. 文章浏览 I【入门】

传送门&#xff1a;1148. 文章浏览 I 题目 Views 表&#xff1a; ---------------------- | Column Name | Type | ---------------------- | article_id | int | | author_id | int | | viewer_id | int | | view_date | date | ---------------------- 此表可能会存在重复…
阅读更多...
内外网互传文件 安全、可控、便捷的跨网数据交换

内外网互传文件 安全、可控、便捷的跨网数据交换

内外网互传文件 安全、可控、便捷的跨网数据交换破解企业数字化痛点&#xff0c;重新定义文件传输标准在数字化转型浪潮中&#xff0c;企业面临着前所未有的挑战&#xff1a;内网系统需要严密防护&#xff0c;外网协作又要高效便民。如何在网络安全与业务效率之间找到完美平衡&…
阅读更多...
性能监控装饰器-python

性能监控装饰器-python

看项目时&#xff0c;发现一个性能监控装饰器&#xff0c;感觉挺有意思的。于是借鉴了他的思路&#xff0c;自己重新写了我认为更简洁的代码。作用&#xff1a;可以放在类上和方法上&#xff0c;如果放在类上&#xff0c;则监控所有方法。根据设置的阈值&#xff0c;判断方法执…
阅读更多...
qt常用控件-05

qt常用控件-05

文章目录qt常用控件-05LineEditTextEditcombo box结语很高兴和大家见面&#xff0c;给生活加点impetus&#xff01;&#xff01;开启今天的编程之路&#xff01;&#xff01; 今天我们进一步c11中常见的新增表达 作者&#xff1a;٩( ‘ω’ )و260 我的专栏&#xff1a;qt&am…
阅读更多...
Python进阶知识之pandas库

Python进阶知识之pandas库

目录 一、Series&#xff1a;一维带标签的数组 二、DataFrame&#xff1a;二维表格型数据结构 三、Series 的核心操作 四、 DataFrame 的核心操作 五、 索引的特殊用法 六、 loc 与 iloc&#xff1a;DataFrame 的高级查询 七、综合案例 一、Series&#xff1a;一维带标签…
阅读更多...
【GIT】基础知识及基本应用

【GIT】基础知识及基本应用

很高兴为您详细介绍Git的相关知识。Git是一个分布式版本控制系统&#xff0c;常用于软件开发中的代码管理和协作。以下是关于Git的一些基础知识&#xff1a;1. 安装和配置安装&#xff1a;Windows&#xff1a;可以从GitHub下载适用于Windows的安装包。MacOS&#xff1a;可以通过…
阅读更多...
Maven Scope标签：解锁Java项目依赖管理的秘密武器

Maven Scope标签：解锁Java项目依赖管理的秘密武器

一、Maven 与依赖管理简介在 Java 项目开发的庞大体系中&#xff0c;Maven 堪称基石般的存在&#xff0c;发挥着极为关键的作用。它遵循 “约定优于配置” 的理念&#xff0c;让项目的构建过程变得规范有序、结构化且具备良好的重复性 。比如&#xff0c;它强制执行标准的项目结…
阅读更多...
IP43半加固笔记本L156H

IP43半加固笔记本L156H

IP43半加固笔记本L156H 产品特性&#xff1a;● 标配Intel I7-7700HQ 4核8线程处理器 ● 操作系统支持Windows7/10 64bit / Li n u x ● DDR4 16G 高速内存 zui高支持64G ● 全高清显示面板15.6寸&#xff0c;1920X1080 ● 内置海德射频模块SMA接口 ● 工作温度&#xff1a;…
阅读更多...
ZooKeeper 是什么？

ZooKeeper 是什么？

ZooKeeper 是一个分布式协调服务&#xff0c;由 Apache 基金会开发&#xff0c;专为分布式系统设计。它提供了高可用、高性能、一致性的核心服务&#xff0c;帮助分布式应用解决诸如配置管理、命名服务、分布式锁、集群协调等问题。ZooKeeper 的核心特点&#xff1a;简单易用&a…
阅读更多...
最新文章

Copyright @ 2022~2023