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

原创 2019-01-17 23:59:00 344
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM实战:模拟智能在线客服系统</title> <style type="text/css"> .content-
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM实战:模拟智能在线客服系统</title>
	<style type="text/css">
		.content-margin{width: 450px;heigth: 650px;background-color: lightskyblue;margin: 30px auto;color: #333;box-shadow: 2px 2px 2px #808080;}
		h2{text-align: center;margin-bottom: -10px;}
		.content{width: 400px;height: 500px;border: 4px double green;background-color: #efefef;margin: 20px auto 10px;}
		ul{list-style: none;line-height: 2em;overflow: hidden;padding: 15px;}
		table{width: 400px;height: 80px;margin: auto;}
		textarea{border: none;resize: none;background-color: lightyellow;outline: none;width: 350px;height: 50px;float: left;}
		button{width: 50px;height: 40px;background-color: seagreen;color: white;border: none;float: right;overflow: hidden;cursor: pointer;outline: none;}
		button:hover{background-color: orange;}
	</style>
</head>
<body>
	<div class="content-margin">
		<h2>在线客服</h2>
		<div class="content">
			<ul>
				<li></li>
			</ul>
		</div>
		<table>
			<tr>
				<td align="right"><textarea name="text"></textarea></td>
				<td align="left"><button type=button>发送</button></td>
			</tr>
		</table>
	</div>
<script>
	//获取页面中相关元素
	let btn = document.getElementsByTagName('button')[0];
	let text = document.getElementsByName('text')[0];
	let ul = document.getElementsByTagName('ul')[0];
	let sum = 0; //计数器
</script>
</body>
</html>

这一节主要讲解的是html布局和css样式和获取页面相关元素,

采用了获取标签和获取name,

let btn = document.getElementsByTagName('button')[0];//获取按钮
let text = document.getElementsByName('text')[0];//获取textarea
let ul = document.getElementsByTagName('ul')[0];//获取ul列表


批改老师:查无此人批改时间:2019-01-18 09:14:35
老师总结:作业完成的不错。也可以用获取ID的方法,获取元素,ID是唯一的,不容易出错。继续加油。

发布手记

热门词条