1. 引入CSS
<link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> <link rel="stylesheet" href="../css/custom/index.css"> <link rel="stylesheet" href="../css/custom/talk.css">
2. 引入JS
<script src="../js/jquery-3.4.1.min.js"></script> <script src="../js/popper.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/custom/index.js"></script> <script src="../js/custom/talk.js"></script>
3. HTML代码
<div class="rfixed navbar navbar-expand-lg p-0"> <div class="talk"> <div class="talk-head"> <span class="talk-link ml-2">和我们在线交谈</span> <i class="slide fa fa-caret-up mx-1 my-1" aria-hidden="true"></i> </div> <div class="talk-body"> <div class="talk-panel"> <p class="card-text">内容1111111111111111111111111111111111111111111111111</p> <p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p><p class="card-text">内容</p> </div> <div class="talk-input"> <div style="height: 10px;"></div> <div class="talk-content w-100" contenteditable="true"> </div> <div class="talk-tools w-100 pl-2"> <div class="talk-emo mx-1"> <div class="row"> <!--放表情--> </div> </div> <a class="click-emo" href="JavaScript:void(0);"> <i class="fa fa-smile-o fa-lg mr-1 text-dark" aria-hidden="true"></i> </a> <button class="btn btn-primary mt-1 btn-sm float-right mr-3">提交</button> </div> </div> </div> </div> </div>