国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<noscript id="dednc"></noscript>

HTML5+CSS3模擬實(shí)現(xiàn)《亮劍》平安縣城一役精彩微信群聊-誰(shuí)開的炮？

2年前作者：經(jīng)海路大白狗分類：Toy博客閱讀(25)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了HTML5+CSS3模擬實(shí)現(xiàn)《亮劍》平安縣城一役精彩微信群聊-誰(shuí)開的炮？。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

轉(zhuǎn)眼從2005年到現(xiàn)在，《亮劍》已經(jīng)播出多年，但熱度依然不減，而且每次重溫我都會(huì)看出不一樣的意蘊(yùn)，今天，我就用HTML5+CSS3模擬實(shí)現(xiàn)《亮劍》平安縣城一役精彩微信群聊-誰(shuí)開的炮？

css 群聊,CSS3動(dòng)畫特效,html5,前端,動(dòng)畫,css3,spring boot

目錄

1. 實(shí)現(xiàn)思路

2. 素材介紹

3. 微信群聊頂部 + 底部 + 聊天區(qū)域?qū)崿F(xiàn)

4. 聊天區(qū)域的實(shí)現(xiàn)

5. 聊天內(nèi)容構(gòu)思

6. 完整源代碼

7. 最后

1. 實(shí)現(xiàn)思路

既然要實(shí)現(xiàn)《亮劍》的平安縣城一役，還要做出精彩的微信群聊，那么必然要微信聊天的相關(guān)素材，例如頂部群聊名稱、底部發(fā)送區(qū)域、中間的群聊區(qū)域、微信頭像、微信文字、表情、聊天圖片、其他人發(fā)送的消息和本人發(fā)送的消息等。

2. 素材介紹

微信界面icon3個(gè)

出場(chǎng)人物9人

聊天表情 + 圖片 3個(gè)

3. 微信群聊頂部 + 底部 + 聊天區(qū)域?qū)崿F(xiàn)

由于群聊必定內(nèi)容較多，所以頂部和底部區(qū)域肯定是固定定位的形式，而且我們每天看到的微信聊天窗口底部會(huì)包含，打字按鈕，輸入框，表情按鈕，加號(hào)按鈕，所以此處會(huì)使用fixed定位和flex布局，同時(shí)很多小icon我已轉(zhuǎn)成了base64的實(shí)現(xiàn)方式。

HTML代碼如下：

<div class="chat-box">
    <div class="head">
       <div class="back"></div>
       <div class="title">《亮劍》討論群(45)</div>
       <div class="opera-point">...</div>
    </div>
    <div class="char-body">
        <!-- 此處稍后添加群聊代碼 -->
    </div>
    <div class="foot">
        <div class="keyboard"></div>
        <div class="input-box">
            <input type="text" />
        </div>
        <div class="face"></div>
        <div class="add"></div>
     </div>
</div>

CSS3代碼如下：

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;
            }
            .foot {
                display: flex;
                position: fixed;
                left: 0;
                top: 627px;
                width: 375px;
                height: 40px;
                background: #222;
            }
            .foot .keyboard {
                margin-top: 8px;
                margin-left: 10px;
                width: 26px;
                height: 26px;
                background: url(./keyboard.png) no-repeat;
                background-size: 26px;
            }
            .foot .input-box {
                margin-left: 18px;
            }
            .foot .input-box input {
                margin-top: 7px;
                height: 26px;
                width: 240px;
                border: none;
                background: #302b2f;
                outline: none;
            }
            .foot .face {
                margin-top: 8px;
                margin-left: 10px;
                width: 26px;
                height: 26px;
                background: url(./face.png) no-repeat;
                background-size: 26px;
            }
            .foot .add {
                margin-top: 7px;
                margin-left: 6px;
                width: 26px;
                height: 26px;
                background: url(./add.png) no-repeat;
                background-size: 26px;
            }
            .char-body {
                width: 375px;
                height: 587px;
                overflow-y: auto;
                position: absolute;
                top: 40px;
            }
            .char-body::-webkit-scrollbar {  
                display: none;
            }

階段實(shí)現(xiàn)效果如下：

css 群聊,CSS3動(dòng)畫特效,html5,前端,動(dòng)畫,css3,spring boot

4. 聊天區(qū)域的實(shí)現(xiàn)

聊天區(qū)域要注意幾點(diǎn)：

聊天區(qū)域不顯示滾動(dòng)條

其他人頭像和文字的排版以及本人頭像與文字的排版問題

如果需要插入表情和圖片的排版控制

實(shí)現(xiàn)聊天內(nèi)容引用的排版

聊天文案的小三角形的實(shí)現(xiàn)

?部分HTML代碼如下（這里只展示部分，最后還會(huì)有完整源代碼）：

<div class="other-people-li">
     <img src="./李云龍.png" class="head-photo" />
     <div class="word">
         我要攻打平安縣城啦！
      </div>
</div>
<div class="other-people-li">
      <img src="./孔二愣子.png" class="head-photo" />
      <div class="word">
          聽上去很過(guò)癮吶！不過(guò)是為什么??？？？
       </div>
</div>

部分CSS3代碼如下（這里只展示部分，最后還會(huì)有完整源代碼）：

.other-people-li, .me-people-li {
                display: flex;
                margin-top: 20px;
}
.other-people-li .head-photo {
                margin-left: 12px;
                width: 50px;
                height: 50px;
                vertical-align: top;
                border-radius: 6px;
}
.other-people-li .word {
                display: inline-block;
                padding: 15px;
                background: #302b2f;
                color: #EEEfFF;
                margin-left: 10px;
                border-radius: 10px;
}
.other-people-li .word img {
                max-width: 238px;
}

5. 聊天內(nèi)容構(gòu)思

其實(shí)《亮劍》整部電視劇來(lái)說(shuō)都是非常精彩的，在上班摸魚回味電視劇本身，我又結(jié)合HTML5+CSS3的小知識(shí)做了這個(gè)群聊，但技術(shù)其實(shí)不是什么難點(diǎn)，難點(diǎn)在于構(gòu)思群聊的內(nèi)容。

6. 完整源代碼

我把完整的源代碼拿出來(lái)，粘貼到自己的HTML文檔中就可以實(shí)現(xiàn)本文的效果啦，至于素材大家可以去百度上找，還是挺多的，完整源代碼如下：

<!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;
            }
            .foot {
                display: flex;
                position: fixed;
                left: 0;
                top: 627px;
                width: 375px;
                height: 40px;
                background: #222;
            }
            .foot .keyboard {
                margin-top: 8px;
                margin-left: 10px;
                width: 26px;
                height: 26px;
                background: url(./keyboard.png) no-repeat;
                background-size: 26px;
            }
            .foot .input-box {
                margin-left: 18px;
            }
            .foot .input-box input {
                margin-top: 7px;
                height: 26px;
                width: 240px;
                border: none;
                background: #302b2f;
                outline: none;
            }
            .foot .face {
                margin-top: 8px;
                margin-left: 10px;
                width: 26px;
                height: 26px;
                background: url(./face.png) no-repeat;
                background-size: 26px;
            }
            .foot .add {
                margin-top: 7px;
                margin-left: 6px;
                width: 26px;
                height: 26px;
                background: url(./add.png) no-repeat;
                background-size: 26px;
            }
            .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 {
                display: flex;
                flex-direction: row-reverse;
                margin-top: 20px;
            }
            .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;
                padding: 15px;
                background: #302b2f;
                color: #EEEfFF;
                margin-left: 10px;
                border-radius: 10px;
            }
            .other-people-li .word img {
                max-width: 238px;
            }
            .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;
            }
        </style>
    </head>
    <body>
        <div class="chat-box">
            <div class="head">
                <div class="back"></div>
                <div class="title">《亮劍》討論群(45)</div>
                <div class="opera-point">...</div>
            </div>

            <div class="char-body">
                <div class="other-people-li">
                    <img src="./李云龍.png" class="head-photo" />
                    <div class="word">
                        我要攻打平安縣城啦！
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./孔二愣子.png" class="head-photo" />
                    <div class="word">
                        聽上去很過(guò)癮吶！不過(guò)是為什么?。?？？
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./丁偉.png" class="head-photo" />
                    <div class="word">
                        老李的話我信，但總得有個(gè)原因吧？
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./秀琴.png" class="head-photo" />
                    <div class="word">
                        因?yàn)樾∪毡景盐易プ呃?                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./山本.png" class="head-photo" />
                    <div class="word">
                        捕虜の攜帯電話を沒収した
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./大彪.png" class="head-photo" />
                    <div class="word">
                        團(tuán)長(zhǎng)，他們把秀琴嫂子手機(jī)沒收啦
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./李云龍.png" class="head-photo" />
                    <div class="word">
                        1營(yíng)，2營(yíng)，騎兵連，王德勝，TND給我打
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./老兵不搶東西.png" class="head-photo" />
                    <div class="word">
                        <img src="./意大利炮.png" />
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./老兵不搶東西.png" class="head-photo" />
                    <div class="word">
                        團(tuán)長(zhǎng)，看
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./李云龍.png" class="head-photo" />
                    <div class="word">
                        這是啥？
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./孔二愣子.png" class="head-photo" />
                    <div class="word">
                        啥玩意？
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./丁偉.png" class="head-photo" />
                    <div class="word">
                        炮?。?！
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./山本.png" class="head-photo" />
                    <div class="word">
                        私のおさん
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./大彪.png" class="head-photo" />
                    <div class="word">
                        團(tuán)長(zhǎng)，小日本說(shuō)“WC”
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./楚云飛.png" class="head-photo" />
                    <div class="word">
                        <img src="./捂臉.png" />
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./李云龍.png" class="head-photo" />
                    <div class="word">
                        那還廢什么話，開炮?。?！
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./山本.png" class="head-photo" />
                    <div class="word">
                        あなたはあなたの嫁を必要としないのですか。
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./大彪.png" class="head-photo" />
                    <div class="word">
                        團(tuán)長(zhǎng)，嫂子還在上面
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./山本.png" class="head-photo" />
                    <div class="word">
                        話をしよう
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./大彪.png" class="head-photo" />
                    <div class="word">
                        團(tuán)長(zhǎng)，山本說(shuō)想談一談
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./老兵不搶東西.png" class="head-photo" />
                    <div class="word">
                        <img src="./爆炸.png" />
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./老兵不搶東西.png" class="head-photo" />
                    <div class="word">
                        團(tuán)長(zhǎng)，炸了
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./山本.png" class="head-photo" />
                    <div class="word">
                        臥槽
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./秀琴.png" class="head-photo" />
                    <div class="word">
                        。。。。。。
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./老兵不搶東西.png" class="head-photo" />
                    <div class="word">
                        不是我開的跑
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./李云龍.png" class="head-photo" />
                    <div class="word">
                        誰(shuí)干的？
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./李云龍.png" class="head-photo" />
                    <div class="word">
                        誰(shuí)干的？
                    </div>
                </div>
                <div class="other-people-li">
                    <img src="./李云龍.png" class="head-photo" />
                    <div class="word">
                        誰(shuí)干的？
                    </div>
                </div>
                <div class="me-people-li">
                    <img src="./小田.png" class="head-photo" />
                    <div class="word">
                        不是要開炮嗎？
                    </div>
                </div>
                <div class="into-box">
                    <span>
                        李云龍：那還廢什么話，開炮！??！
                    </span>
                </div>
            </div>

            <div class="foot">
                <div class="keyboard"></div>
                <div class="input-box">
                    <input type="text" />
                </div>
                <div class="face"></div>
                <div class="add"></div>
            </div>
        </div>
    </body>
</html>

7. 最后

如果你在上班摸魚的時(shí)候看到這篇博客，或者是在工作學(xué)習(xí)忙碌之余看到這篇博客，希望讀完以后可以讓你感到輕松一些，如果你真的感到輕松了，那么這篇博客的目的也就算是達(dá)到了。

另外，狗哥和天哥最近也在輸出實(shí)戰(zhàn)類專欄（采用SpringBoot + SpringCloud + Vue前后端分離的形式），目的是希望初學(xué)者或者是需要做畢業(yè)設(shè)計(jì)的畢業(yè)生，可以跟著專欄從0到1實(shí)現(xiàn)一個(gè)屬于自己的項(xiàng)目。目前專欄的進(jìn)度我跟大家做一個(gè)匯報(bào)，喜歡的小伙伴可以抓緊訂閱一下：

Vue + SpringBoot前后端分離項(xiàng)目實(shí)戰(zhàn) - 前端目錄

1.?手把手帶你做一套畢業(yè)設(shè)計(jì)-征程開啟

2.?我應(yīng)該把畢業(yè)設(shè)計(jì)做到什么程度才能過(guò)關(guān)？

3.?做畢業(yè)設(shè)計(jì)，前端部分你需要掌握的6個(gè)核心技能

4.?基于Vue+Vue-cli+webpack搭建漸進(jìn)式高可維護(hù)性前端實(shí)戰(zhàn)項(xiàng)目

SpringBoot+Vue前后端分離項(xiàng)目實(shí)戰(zhàn) - 服務(wù)端目錄

1.?基于SpringBoot+SpringCloud+Vue前后端分離項(xiàng)目實(shí)戰(zhàn) --開篇

2.?天狗實(shí)戰(zhàn)SpringBoot+Vue（一）環(huán)境安裝

3.?天狗實(shí)戰(zhàn)SpringBoot+Vue（二）項(xiàng)目結(jié)構(gòu)搭建（上）

回歸《亮劍》和本文的內(nèi)容，我想出了一個(gè)非常有意思的投票內(nèi)容，希望你喜歡這個(gè)投票環(huán)節(jié)呀文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-786726.html

到了這里，關(guān)于HTML5+CSS3模擬實(shí)現(xiàn)《亮劍》平安縣城一役精彩微信群聊-誰(shuí)開的炮？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

響應(yīng)式開發(fā)（HTML5CSS3）實(shí)現(xiàn)媒體查詢的功能案例
目錄前言一、媒體查詢知識(shí)點(diǎn) 二、實(shí)現(xiàn)功能的尺寸三、代碼部分 1.不帶嵌套的媒體查詢功能 1.1.代碼段 1.2.運(yùn)行結(jié)果 2.帶嵌套的媒體查詢功能? 2.1.代碼段 2.2.運(yùn)行結(jié)果 2.2.3視頻效果 1.本文講解的響應(yīng)式開發(fā)技術(shù)（HTML5+CSS3+Bootstrap）的HTML5媒體查詢等功能方法的代碼，這也是很
2023年04月27日
瀏覽(30)
HTML5和CSS3七CSS3四
代碼下載地址 Transision過(guò)渡動(dòng)畫是從一個(gè)狀態(tài)到另一個(gè)狀態(tài)，而Animation動(dòng)畫可以有多個(gè)關(guān)鍵幀 animation-name：設(shè)置動(dòng)畫ID animation-duration：設(shè)置動(dòng)畫總時(shí)長(zhǎng) animation-timing-function：設(shè)置動(dòng)畫時(shí)間函數(shù)，同過(guò)渡動(dòng)畫 animation-iteration-count：設(shè)置動(dòng)畫播放次數(shù)，默認(rèn)1次，可以是具體次數(shù)也可
2023年04月23日
瀏覽(25)
CSS3與HTML5
box-sizing content-box：默認(rèn)，寬高包不含邊框和內(nèi)邊距 border-box：也叫怪異盒子，寬高包含邊框和內(nèi)邊距動(dòng)畫：移動(dòng)translate，旋轉(zhuǎn)、transform等等走馬燈：利用動(dòng)畫實(shí)現(xiàn)animation：from… to… 隱藏元素： visibility：hidden 占位 display：none 不占位畫頁(yè)面前重置瀏覽器自帶樣式快格式化上
2024年02月07日
瀏覽(34)
HTML5和CSS3筆記
1.1：頁(yè)面結(jié)構(gòu)： 1.2：標(biāo)簽類型： 1.2.1：塊標(biāo)簽： ?1.2.2：行內(nèi)標(biāo)簽： 1.2.3：行內(nèi)塊標(biāo)簽： 1.2.4：塊標(biāo)簽與行內(nèi)標(biāo)簽的轉(zhuǎn)換：（可以設(shè)置在不在同一行和隱藏） 1.3：表單與表格標(biāo)簽： ? 表單：? ? 表格：? ?1.4：H5標(biāo)簽： 1.4.1：語(yǔ)義標(biāo)簽： ? 1.4.2：多媒體標(biāo)簽：（音頻audio和視
2024年03月24日
瀏覽(23)
HTML5CSS3提高
HTML5 的新增特性主要是針對(duì)于以前的不足，增加了一些新的標(biāo)簽、新的表單和新的表單屬性等。這些新特性都有兼容性問題，基本是 IE9+ 以上版本的瀏覽器才支持，如果不考慮兼容性問題，可以大量使用這些新特性。以前布局，我們基本用 div 來(lái)做。div 對(duì)于搜索引擎來(lái)說(shuō)，
2024年02月14日
瀏覽(24)
尚硅谷html5+css3（3）布局
1.文檔流normal flow -網(wǎng)頁(yè)是一個(gè)多層結(jié)構(gòu) -通過(guò)CSS可以分別為每一層設(shè)置樣式 -用戶只能看到最頂層 -最底層：文檔流（我們所創(chuàng)建的元素默認(rèn)都是從文檔流中進(jìn)行排列） 2.盒子模型 ? 1.盒子模型-邊框 2.盒子模型-內(nèi)邊距 3.盒子模型-外邊距 4.盒子模型-水平方向的布局 5.盒子模型
2024年04月09日
瀏覽(41)
html5和css3的新特性
標(biāo)簽 ????????!-- 高亮 mark -- ?? ??? ?!-- 摘要概述 -- ?? ??? ?details ?? ??? ??? ?summary ?? ??? ??? ??? ?咖啡 ?? ??? ??? ?/summary ?? ??? ??? ?ul ?? ??? ??? ??? ?li拿鐵/li ?? ??? ??? ??? ?li美式/li ?? ??? ??? ?/ul ?? ??? ?/details ?? ??? ???
2024年02月11日
瀏覽(32)
h5(html5)+css3前端筆記二
一、表格標(biāo)簽表格的主要作用：表格主要用于顯示、展示數(shù)據(jù) ，因?yàn)樗梢宰寯?shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺(tái)展示數(shù)據(jù)的時(shí)候，能夠熟練運(yùn)用表格就顯得很重要。一個(gè)清爽簡(jiǎn)約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。 1. table/table 用來(lái)定義表格的標(biāo)簽
2024年02月14日
瀏覽(30)
響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版第1章 HTML5+CSS3初體驗(yàn) 項(xiàng)目1-1 三欄布局頁(yè)面
三欄布局是一種常用的網(wǎng)頁(yè)布局結(jié)構(gòu)。除了頭部區(qū)域、底部區(qū)域外，中間的區(qū)域（主體區(qū)域）劃分成了三個(gè)欄目，分別是左側(cè)邊欄、內(nèi)容區(qū)域和右側(cè)邊欄，這三個(gè)欄目就構(gòu)成了三欄布局。當(dāng)瀏覽器的寬度發(fā)聲變化時(shí)，頁(yè)面中左側(cè)邊欄和右側(cè)邊欄的寬度固定不變，而內(nèi)容區(qū)域的
2024年01月17日
瀏覽(37)
【前端基礎(chǔ)篇】HTML5 + CSS3 入門知識(shí)
萬(wàn)維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改（這是一項(xiàng)推薦標(biāo)準(zhǔn)、外語(yǔ)原文：W3C Recommendation） HTML5是HTML最新的修訂版本，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。 HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。 HTML5 簡(jiǎn)
2024年02月09日
瀏覽(24)

<u id="fcqot"><option id="fcqot"></option></u>