在线客服系统样式!

原创 2019-02-18 14:20:28 281
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>在线客服系统</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: none;

            line-height: 2em;

            /*border: 1px solid red;*/

            overflow: hidden;

            padding: 15px;

        }


        table {

            width: 90%;

            height:80px;

            margin: auto;

        }


        textarea{

            /*width: 300px;*/

            border: none;

            resize: none;

            background-color: lightyellow;

            

        }

        button {

            width: 60px;

            height: 40px;

            background-color: seagreen;

            color: white;

            border: none;

            /*text-align: left;*/


        }

        button:hover {

            cursor: pointer;

            background-color: orange;

        }

    </style>

</head>

<body>

    <div>

        <h2>在线客服</h2>

        <div contenteditable="true">

            <ul>

                <li></li>

            </ul>

        </div>

        <table>

            <tr>

                <td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>

                <td align="left"><button type=button>发送</button></td>

            </tr>

        </table>    

    </div>

    

    </script>

</body>

</html>


批改老师:天蓬老师批改时间:2019-02-18 14:23:38
老师总结:这个作业 ,样式并不重要, 你的js代码吗?

发布手记

热门词条