DOM实战:模拟智能在线客服系统

Original 2019-05-19 16:45:59 202
abstract:<!DOCTYPE html><html><head> <title>DOM实战:模拟智能在线客服系统</title> <style type="text/css"> div:nth-child(1){ width: 450px; height: 650px; background-color

<!DOCTYPE html>

<html>

<head>

<title>DOM实战:模拟智能在线客服系统</title>

<style type="text/css">

div:nth-child(1){

width: 450px;

height: 650px;

background-color: lightskyblue;

margin: 30px auto;

color: #333;

box-shadow: 2px 2px 2px #808080;

}

h2{

text-align: center;

margin-bottom: -10px;

}

div:nth-child(2){

width: 400px;

height: 500px;

border:4px double green;

background-color: #efefef;

margin: 20px auto 10px;

}

ul{

list-style-type: none;

line-height: 2em;

overflow: hidden;

padding: 15px;


}

table{

width: 90%;

height: 80px;

margin: 0px auto;

}

textarea{

border: none;

resize: none;

background-color: lightyellow;

}

button{

width: 60px;

height: 40px;

background-color: seagreen;

color: white;

border:none;

}

button:hover{

cursor: pointer;

background: orange;

}

</style>

</head>

<body>

<div>

<h2>在线客服</h2>

<div>

<ul>

<li></li>

</ul>

</div>

<table>

    <tr>

<td align="right"><textarea name="text" cols="50" rows="4"></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.getElementByName('text')[0];

let list = document.getElementsByTagName('ul')[0];

let sum = 0;


</script>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-05-20 09:07:56
Teacher's summary:完成的不错,常用的css样式可以写到公用文件里,继续加油。

Release Notes

Popular Entries