布局在线客服1

原创 2019-01-01 00:16:50 403
摘要:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>在线客服</title>    <style>        div

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>在线客服</title>

    <style>

        div:nth-child(1) {

            width: 450px;

            height: 650px;

            background-color: lightskyblue;

            margin: 30px auto;

            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: 100px;

            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>

        <table>

            <tr>

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

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

            </tr>

        </table>

    </div>

    </div>

</body>

</html>


批改老师:天蓬老师批改时间:2019-01-01 09:16:52
老师总结:这是一个简单的布局, 还没有出现业务逻辑, 不过,写得很规范的

发布手记

热门词条