本页面利用Js技术制作,并使用了百度API的免费接口
链接:https://apis.baidu.com/store/detail/eef864e1-6f2e-4631-befc-5afe35cab769
代码部分:
html:
<body>
<div class="chat">
<div style="height: 10px;"></div>
<div class="item robot">
<div class="AIPic"></div>
<p class="naviQuest">性感堡垒,在线解惑</p>
</div>
</div>
</div>
<div class="input">
<textarea id="in" placeholder="输入您想知道的:(按下Crtl+回车键输入)"></textarea>
</div>
<button class="ok">发送</button>
</body>
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
background: black;
}
html,body{
height: 100%;
}
.chat{
width: 100%;
height: 80%;
overflow-y: scroll;
}
.input{
height: 20%;
}
.item{
width: 100%;
float: left;
margin-bottom: 10px;
}
.AIPic{
float: left;
width: 59px;
height: 59px;
border: 1px solid skyblue;
border-radius: 50%;
background-image: url("../../Js/imgs/AI.jpg");
}
.naviQuest{
max-width: 50%;
display: block;
background: rgba(200,120,80,0.5);
color: red;
padding: 15px;
border-radius: 10px;
margin-left: 5px;
font-size: 18px;
float: left;
}
.userPic{
float: right;
width: 59px;
height: 59px;
border: 1px solid skyblue;
border-radius: 50%;
background-image: url("../../Js/imgs/user.jpg");
}
.QuestWord{
float: right;
max-width: 50%;
display: block;
background: rgba(120,100,200,0.6);
color: darkred;
padding: 15px;
border-radius: 10px;
margin-right: 5px;
font-size: 18px;
}
#in{
width: 75%;
height: 75%;
resize: none;
color: firebrick;
border: 1px solid white;
padding: 5px;
display: block;
margin: 0 auto;
border-radius: 6px;
font-size: 18px;
}
.chat::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.chat::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: blue;
}
.chat::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: deepskyblue;
}
.ok{
position: fixed;
width: 60px;
height: 40px;
border: 1px solid yellow;
bottom: 20%;
right: 12%;
color: white;
border-radius: 10px;
display: none;
}
@media screen and (max-width: 576px) {
.ok {
display: block;
}
}
</style>
gif展示:
