手记 / 智能客服系统学习总结上

智能客服系统学习总结上

2天前6浏览0评论
<!DOCTYPE html>
<html>
<head>
 <title>模拟智能在线客服系统</title>
 <style type="text/css">
  .div_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_2{
         width: 400px;
         height: 500px;
         border: 4px double green;
         background-color: #efefef;
         margin: 20px auto 10px;
        }
        ul{
         list-style-type: nene;
         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 class="div_1">
    <h2>在线客服</h2>
    <div class="div_2">
     <ul>
      <li></li>
     </ul>
    </div>
    <table>
     <tr>
      <td class="right"><textarea name="text" cols='50' rows='4'></textarea></td>
      <td class="left"><button type="button">发送</button></td>
     </tr>
    </table>
  </div>
  <script type="text/javascript">
   //获取到页面上相关的元素
   var btn=document.getElementsByTagName('button')[0];
    var text=document.getElementsByName('text')[0];
    var list =document.getElementsByTagName('ul')[0];
    var sum = 0;  这是计数器
  </script>
</body>
</html>

本节课主要讲了智能在线客服系统的聊天窗口所需的html标签和css样式,还有就是获取页面中的相关元素

QQ图片20181208184309.png

相关标签:HTMLCSSJavaScript
    0推荐

      吴勇文

      PHP开发工程师加油!努力!奋斗!

      作者的热门手记

      PHP中文网

      未登录