1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<div class="chatContainer"> <div class="chatBtn"> <i class="iconfont icon-xiaoxi1"></i> </div> <div class="chat-message-num">10</div> <div class="chatBox" ref="chatBox"> <div class="chatBox-head"> <div class="chatBox-head-one"> Conversations <div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div> </div> <div class="chatBox-head-two"> <div class="chat-return">返回</div> <div class="chat-people"> <div class="ChatInfoHead"> <img src="" alt="头像"> </div> <div class="ChatInfoName">这是用户的名字，看看名字到底能有多长</div> </div> <div class="chat-close">关闭</div> </div> </div> <div class="chatBox-info"> <div class="chatBox-list" ref="chatBoxlist"> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>自酌一杯酒</p> </div> <div class="message-num">10</div> </div> <div class="chat-list-people"> <div><img src="img/icon02.png" alt="头像"></div> <div class="chat-name"> <p>白兰地</p> </div> <div class="message-num">8</div> </div> <div class="chat-list-people"> <div><img src="img/icon03.png" alt="头像"></div> <div class="chat-name"> <p>威士忌</p> </div> <div class="message-num">2</div> </div> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>荷兰金酒</p> </div> <div class="message-num">20</div> </div> <div class="chat-list-people"> <div><img src="img/icon03.png" alt="头像"></div> <div class="chat-name"> <p>朗姆酒</p> </div> <div class="message-num">10</div> </div> <div class="chat-list-people"> <div><img src="img/icon02.png" alt="头像"></div> <div class="chat-name"> <p>特其拉酒</p> </div> <div class="message-num">18</div> </div> <div class="chat-list-people"> <div><img src="img/icon02.png" alt="头像"></div> <div class="chat-name"> <p>鸡尾酒</p> </div> <div class="message-num">9</div> </div> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>虎骨酒</p> </div> <div class="message-num">12</div> </div> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>琴酒</p> </div> <div class="message-num">99+</div> </div> <div class="chat-list-people"> <div><img src="img/icon02.png" alt="头像"></div> <div class="chat-name"> <p>葡萄酒</p> </div> <div class="message-num"></div> </div> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>蓝莓酒</p> </div> <div class="message-num"></div> </div> <div class="chat-list-people"> <div><img src="img/icon03.png" alt="头像"></div> <div class="chat-name"> <p>樱花酒</p> </div> <div class="message-num"></div> </div> </div> <div class="chatBox-kuang" ref="chatBoxkuang"> <div class="chatBox-content"> <div class="chatBox-content-demo" id="chatBox-content-demo"> <div class="clearfloat"> <div class="author-name"> <small class="chat-date">2017-12-02 14:26:58</small> </div> <div class="left"> <div class="chat-avatars"><img src="img/icon01.png" alt="头像"></div> <div class="chat-message"> 给你看张图 </div> </div> </div> <div class="clearfloat"> <div class="author-name"> <small class="chat-date">2017-12-02 14:26:58</small> </div> <div class="left"> <div class="chat-avatars"><img src="img/icon01.png" alt="头像"></div> <div class="chat-message"> <img src="img/1.png" alt=""> </div> </div> </div> <div class="clearfloat"> <div class="author-name"> <small class="chat-date">2017-12-02 14:26:58</small> </div> <div class="right"> <div class="chat-message">嗯，适合做壁纸</div> <div class="chat-avatars"><img src="img/icon02.png" alt="头像"></div> </div> </div> </div> </div> <div class="chatBox-send"> <div class="div-textarea" contenteditable="true"></div> <div> <button id="chat-biaoqing" class="btn-default-styles"> <i class="iconfont icon-biaoqing"></i> </button> <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles"> <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png" name="file" id="inputImage" class="hidden"> <i class="iconfont icon-tuxiang"></i> </label> <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i> </button> </div> </div> </div> </div> </div></div>
4、书写css代码。.btn-default-styles { outline: none; resize多唉捋胝: none; border: none; display: inline-block; padding: 5px 10px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; background: #bbb; color: #fff; border-radius: 4px; }.btn-default-styles:focus { outline: none; }.btn-default-styles:hover { background: #c5c5c5; animation: anniu 1s infinite; }.btn-default-styles:active { box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset; }.chatContainer { position: fixed; bottom: 20px; right: 20px; }.chatBtn { width: 50px; height: 50px; background: #01bef0; color: #fff; line-height: 50px; text-align: center; border-radius: 50%; box-shadow: 2px 2px 2px #d4d4d4; cursor: pointer; position: absolute; bottom: 0; right: 0; overflow: hidden; }.chatBtn:hover { background: #01b3df; box-shadow: none; }.chatBtn>i { font-size: 25px; }.chatBox { width: 370px; min-width: 320px; height: 570px; border-radius: 10px; background: #f5ecff; position: absolute; bottom: 0; right: 70px; overflow: hidden; border: solid 1px #d5d5d5; box-shadow: 1px 1px 2px #c0c0c0; z-index: 1005; }.chatBox-head { width: 100%; height: 75px; background: #01aee0; position: absolute; top: 0; left: 0; }.chatBox-head-one { width: 100%; height: 75px; line-height: 75px; color: #fff; font-size: 20px; text-align: center; position: absolute; top: 0; left: 0; }.chatBox-head-two { width: 100%; height: 75px; color: #fff; padding: 10px 10px; display: none; position: absolute; top: 0; left: 0; }.chat-return { float: left; width: 55px; height: 55px; line-height: 55px; border-radius: 10px; cursor: pointer; text-align: center; }.chat-return:hover { background: #0188b7; }.chat-close { float: right; width: 55px; height: 55px; line-height: 55px; border-radius: 10px; cursor: pointer; text-align: center; }.chat-close:hover { background: #0188b7; }.chat-people { float: left; }.chat-people>div { height: 55px; display: inline-block; vertical-align: middle; line-height: 55px; margin-left: 5px; }.chat-people>div:nth-of-type(1) { width: 50px; height: 50px; border-radius: 50%; background: #eee; overflow: hidden; }.chat-people>div:nth-of-type(1)>img { width: 50px; height: 50px; }.chat-people>div:nth-of-type(2) { width: 165px; text-align: left; height: 55px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.chatBox-info { width: 100%; height: 495px; background: #fff; text-align: left; position: absolute; top: 75px; left: 0; }.chatBox-list { width: 100%; height: 495px; overflow-y: scroll; }.chat-list-people:hover { cursor: pointer; background: #f8f8f8; }.chat-list-people>div { height: 55px; display: inline-block; vertical-align: middle; margin-left: 10px; }.chat-list-people>div:nth-of-type(1) { width: 40px; height: 40px; border-radius: 50%; background: #eee; overflow: hidden; }.chat-list-people>div:nth-of-type(1)>img { width: 40px; height: 40px; }.chat-name { width: 230px; }
5、书写并添加js代码。<script src="js/jquery.min.js"></script><script> screenFuc(); function screenFuc() { var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度 //屏幕小于768px时候,布局change var winWidth = $(window).innerWidth(); if (winWidth <= 768) { var totalHeight = $(window).height(); //页面整体高度 $(".chatBox-info").css("height", totalHeight - topHeight); var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度 //中间内容高度 $(".chatBox-content").css("height", infoHeight - 46); $(".chatBox-content-demo").css("height", infoHeight - 46); $(".chatBox-list").css("height", totalHeight - topHeight); $(".chatBox-kuang").css("height", totalHeight - topHeight); $(".div-textarea").css("width", winWidth - 106); } else { $(".chatBox-info").css("height", 495); $(".chatBox-content").css("height", 448); $(".chatBox-content-demo").css("height", 448); $(".chatBox-list").css("height", 495); $(".chatBox-kuang").css("height", 495); $(".div-textarea").css("width", 260);</script>
6、代码整体结构。
7、查看效果。
