模拟智能在线客服系统布局

abstract：首先要对此项目做一个布局.将布局放入一个大的div之中,在div中上方是在线客服的标题,下面第一部分是发送区内容以及客服的相关回话,第二部分是文本输入框以及发送按键,通过css对样式进行简单的布局,再在脚本中获取相关的标签.<!DOCTYPE html> <html> <head> <title&

首先要对此项目做一个布局.将布局放入一个大的div之中,在div中上方是在线客服的标题,下面第一部分是发送区内容以及客服的相关回话,第二部分是文本输入框以及发送按键,通过css对样式进行简单的布局,再在脚本中获取相关的标签.

<!DOCTYPE html>
<html>
<head>
	<title>模拟智能在线客服系统</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{margin: 0px;padding: 0px}
		div:nth-child(1) {
			width: 450px;
			height: 650px;
			background-color: #acf;
			margin: 30px auto;
			color: #333
			box-shadow: 2px 2px 2px #808080;
		}

		h2{
			text-align: center;
			margin-bottom: -10px;
			font-weight: 400;
			font-family: 华文琥珀;
		}

		div:nth-child(2) {
			width: 400px;
			height: 500px;
			border: 5px double #ff6700;
			background-color: #efefef;
			margin: 20px auto 10px;
		}

		ul {
			list-style: none;
			line-height: 2em;
			overflow: hidden;
			padding: 15px;
		}

		table {
			width: 90%;
			height: 80px;
			margin: auto;
		}

		textarea {
			border: none;
			resize: none;
			background-color: lightyellow;
		}

		button {
			width: 60px;
			height: 40px;
			background-color: #F1AD7C;
			color: #000;
			border: none;
			font-family: 幼圆;
			font-weight: bold;
		}

		button:hover {
			cursor: pointer;
			background-color: ;
			color: #fff;
		}
	</style>
</head>
<body>
	<div>
		<h2>在线客服</h2>
		<div contenteditable="true">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
				<td align="left"><button type="button">发送</button></td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">
		let btn = document.getElementsByTagName('button')[0];
		let text = document.getElementsByName('text')[0];
		let list = document.getElementsByTagName('ul')[0];
		let sum = 0;
	</script>
	
</body>
</html>

Correcting teacher：查无此人Correction time：2019-03-18 09:46:17
Teacher's summary：完成的不错，逻辑很清晰。做功能就是想着怎么把它拼装起来。继续加油

模拟智能在线客服系统布局

Popular Entries