在线客服页面布局作业

原创 2018-12-31 22:17:52 348
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM实战:模拟智能在线客服系统</title>   <style type="text/css"> &n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM实战:模拟智能在线客服系统</title>
  <style type="text/css">
    div:nth-child(1){
      width: 450px;
      height: 650px;
      background-color: lightskyblue;
      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: #efefef;
      margin: 20px auto 10px;
    }

    ul {
      list-style-type: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: seagreen;
      color:white;
      border: none;
    }
    button:hover{
      cursor: pointer;
      background-color:orange;
    }
  </style>
</head>
<body>
<div>
  <h2>在线客服</h2>
  <div>
    <ul>
      <li></li>
    </ul>
  </div>
  <table>
    <tr>
      <td><textarea name="text" cols="50" rows="4"></textarea></td>
      <td><button type="button">发送</button></td>
    </tr>
  </table>
</div>
</body>
<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>
</html>


批改老师:天蓬老师批改时间:2018-12-31 22:34:59
老师总结:let sum = 0; //计数器, 这里为什么要用let , 用var 是否可以呢?

发布手记

热门词条