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
英文地址，請注明出處：http://en.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