摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线智能聊天信息</title> <style> .main{ width:&n
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线智能聊天信息</title>
<style>
.main{
width: 450px;
height: 650px;
background-color: lightskyblue;
margin: 30px auto;
color: #333;
box-shadow: 2px 2px 2px #808080;
text-align: center;
border-radius: 5px;
box-sizing: border-box;
padding:12px;
}
h2{margin:0;margin-bottom:18px;}
ul , li{margin:0;padding:0;}
ul {
height:528px;
margin-bottom:15px;
margin-bottom: 15px;
border: 1px solid #999;
border-radius: 5px;
background-color: aliceblue;
}
li{list-style: none;}
.main div:last-child{display: flex;justify-content: center;align-items: center;}
/* 输入信息 */
textarea{resize: none;overflow: hidden;border-radius: 5px;outline: none;text-align: left;}
/* 发送按钮 */
button {background:#f1f1f1;padding:8px 10px;border-radius:3px;outline: none;border:1px solid #999;margin-left:20px;cursor: pointer;}
button:active{background:#00F7DE;}
</style>
</head>
<body>
<div class="main">
<h2>在线客服</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<!-- 发送布局 -->
<div>
<!-- 文本域 -->
<textarea rows="2" cols="40">
</textarea>
<!-- 按钮 -->
<button >发送</button>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-01 10:01:31
老师总结：除了练习在线回复效果,还可以适当布局,练习布局知识
