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>
