客服机器人html，前端js,css实现
2024-12-25 17:36
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href=https://download.csdn.net/download/liujian57/"css/css.css"/>
</head>
<body>
<div class="container">
<div class="top_div">
<img src=https://download.csdn.net/download/liujian57/"img/logo.png"/><span><a href=https://download.csdn.net/download/liujian57/"#" class="btn1">在线客户</a><a href=https://download.csdn.net/download/liujian57/"#" class="btn2">开发者论坛</a></span>
</div>
<div class="main">
<div class="pop">
<div class="pop_con">
<p>你对小移的服务感到满意吗？</p>
<div class="pop_btn">
<a href=https://download.csdn.net/download/liujian57/"#" class="bad_btn"><img src=https://download.csdn.net/download/liujian57/"img/icon1.png"/><span>吐槽一下</span></a>
<a href=https://download.csdn.net/download/liujian57/"#" class="good_btn"><img src=https://download.csdn.net/download/liujian57/"img/icon2.png"/><span>赞一下</span></a>
</div>
</div>
</div>
<div class="pop2">
<div class="pop2_con">
<p>问题描述：<span>（必填）</span></p>
<p><textarea></textarea></p>
<p>联系姓名：<span>（必填）</span></p>
<p><input type="text"/></p>
<p>联系电话：<span>（必填）</span></p>
<p><input type="text"/></p>
<p>联系邮箱：<span>（必填）</span></p>
<p><input type="text"/></p>
<div class="pop2_btn">
<a href=https://download.csdn.net/download/liujian57/"#" class="cancel_btn"><span>取消</span></a>
<a href=https://download.csdn.net/download/liujian57/"#" class="sure_btn"><span>提交</span></a>
</div>
</div>
</div>
<div class="main_con">
<div class="dialog">
<div id="lanrenzhijia">
<div class="content1">
<img src=https://download.csdn.net/download/liujian57/"img/face1.png"/>
<p>小移随时为您进行服务，输入相关问题，小移会为您进行解答；另外你也可以点击右边导航栏查询热点问题哦。</p>
<div class="clear"></div>
</div>
<div class="content2">
<img src=https://download.csdn.net/download/liujian57/"img/face2.png"/>
<p>小移随时为您进行服务，输入相关问题，小移会为您进行解答；另外你也可以点击右边导航栏查询热点问题哦。</p>
<div class="clear"></div>
</div>
<div class="content1">
<img src=https://download.csdn.net/download/liujian57/"img/face1.png"/>
<p>小移随时为您进行服务，输入相关问题，小移会为您进行解答；另外你也可以点击右边导航栏查询热点问题哦。</p>
<div class="clear"></div>
</div>
<div class="content2">
<img src=https://download.csdn.net/download/liujian57/"img/face2.png"/>
<p>小移随时为您进行服务，输入相关问题，小移会为您进行解答；另外你也可以点击右边导航栏查询热点问题哦。</p>
<div class="clear"></div>
</div>
<div class="content1">
<img src=https://download.csdn.net/download/liujian57/"img/face1.png"/>
<p>小移随时为您进行服务，输入相关问题，小移会为您进行解答；另外你也可以点击右边导航栏查询热点问题哦。</p>
<div class="clear"></div>
</div>
<div class="content2">
<img src=https://download.csdn.net/download/liujian57/"img/face2.png"/>
<p>小移随时为您进行服务，输入相关问题，小移会为您进行解答；另外你也可以点击右边导航栏查询热点问题哦。</p>
<div class="clear"></div>
</div>
</div>
</div>
<div class="input_txt">
<textarea placeholder="请简要描述您的问题，如“返回码20111”" id="txt"></textarea>
</div>
<div class="btn">
<a href=https://download.csdn.net/download/liujian57/"#" class="btn3">满意度评价</a><a href=https://download.csdn.net/download/liujian57/"#" class="btn4">问题反馈</a>
<a href=https://download.csdn.net/download/liujian57/"#" class="btn6">发送</a><a href=https://download.csdn.net/download/liujian57/"#" class="btn5">关闭</a>
</div>
</div>
<div class="main_right">
<div class="nav">
<span><a href=https://download.csdn.net/download/liujian57/"#" onClick="return false;">开发前问题</a></span>
<span><a href=https://download.csdn.net/download/liujian57/"#" onClick="return false;">开发中问题</a></span>
<span><a href=https://download.csdn.net/download/liujian57/"#" onClick="return false;">返回码问题</a></span>
</div>
<div class="more_btn"><a href=https://download.csdn.net/download/liujian57/"#">查看更多>></a></div>
<div class="main_right_con" >
<div class="answer">
<p>1、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>2、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>3、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>4、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>5、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>6、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>7、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
</div>
<div class="main_right_con" >
<div class="answer">
<p>1、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>2、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>3、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>4、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>5、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
</div>
<div class="main_right_con" >
<div class="answer">
<p>1、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>2、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>3、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>4、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>5、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
<div class="answer">
<p>6、XXX XX XXXX XXXX XXXX XXX XX XXX XXX XXXXX</p>
<p class="a">XXX XX XX XX XXX XXX XXX XXX XXX XXX XXX XXX</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src=https://download.csdn.net/download/liujian57/"js/jquery.min.js"></script>
<script src=https://download.csdn.net/download/liujian57/"js/jquery.nicescroll.js"></script>
<script type="text/javascript">
$(function(){
$("#lanrenzhijia").niceScroll({
cursorcolor:"#67a8d1",
cursoropacitymax:1,
touchbehavior:false,
cursorwidth:"6px",
cursorborder:"0",
cursorborderradius:"6px"
});
$('.main_right_con').eq(0).show();
});
function setPos() {
var div = document.getElementById('lanrenzhijia');
div.scrollTop = div.scrollHeight;
}