DOM实战：模拟智能在线客服系统完成并优化样式

abstract：DOM实战：模拟智能在线客服系统完成并优化样式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM实战：模拟智能在线客服系统<

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM实战：模拟智能在线客服系统</title>
    <style>
        div:nth-child(1){
            width: 450px;
            height: 650px;
            background-color: #f0c674;
            margin: 10px auto;
            color: #ff5500;
            box-shadow: 2px 2px 2px #cccccc;
            border-radius: 15px;
        }

        h2 {
            text-align: center;
            padding-top: 10px;
        }

        img {
            width: 30px;
            padding-left: 10px;
            position: relative;
            top: 5px;
        }

        div:nth-child(2){
            width: 400px;
            height: 490px;
            background-color: ghostwhite;
            margin: 10px auto;
            border-radius: 10px;
            border: 2px double #3C3C3C;
        }

        table {
            margin: 10px auto;

        }

        textarea {
            width: 300px;
            margin-right: 15px;
            /*border: none;*/
            /*不可以调整*/
            resize: none;
            border-radius: 5px;
            background-color: lavenderblush;
        }

        button {
            border: none;
            width: 75px;
            height: 50px;
            background-color: #ff5500;
            box-shadow: 2px 2px 2px #3C3C3C;
            border-radius: 10px;
            color: white;
            font-size: 1.5em;
            font-family: 楷体;
        }

        button:hover{
            /*鼠标变成手*/
            cursor: pointer;
            background-color: lightgreen;
        }

        ul {
            list-style: none;
            line-height: 2em;
            /*overflow 属性规定当内容溢出元素框时发生的事情。*/
            /*hidden 内容会被修剪，并且其余内容是不可见的。*/
            overflow: hidden;
            padding: 15px;
        }
    </style>
</head>
<body>

<div>
    <h2>在线客服<img src="static/images/kf.jpg"></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>提交</button></td>
        </tr>
    </table>

</div>

<script>
    //获取到页面中的相关元素
    let btn = document.getElementsByTagName('button').item(0)
    console.log(btn);
    let text = document.getElementsByName('text').item(0)
    console.log(text);
    let list = document.getElementsByTagName('ul').item(0)
    console.log(list);

    let num = 0;//计数器，用于满10条内容后清空列表

</script>

</body>
</html>

运行截图：

QQ截图20190630174235.png

总结，

通过案例熟悉使用css控制样式，自己想要的样式都能通过代码实现；

Correcting teacher：天蓬老师Correction time：2019-07-01 17:40:08
Teacher's summary：样式写得不错........, 形式固然重要, 业务逻辑更重要.......

DOM实战：模拟智能在线客服系统完成并优化样式

Popular Entries