盒子模型 

<title>Title</title>
    <style>
        h1,ul,li,a,body{
            margin:0;
            padding:0;
            text-decoration: none;
        }
        #box{
            width: 300px;
            border: 1px solid deeppink;
            /*上下为0左右居中*/
            margin: 0 auto;
        }
        h2{
            /*大小*/
            font-size: 10px;
            background: #3748ff;
            /*行高*/
            line-height: 30px;
            /*上下的内边距变为0*/
            margin-bottom: 0;
        }
        form{
            /*外边框的颜色*/
            background: gainsboro;
        }
        div:nth-of-type(1) input{
            /*solid实线边框*/
            border: 3px solid pink;
        }
        div:nth-of-type(2) input{
            /*dashed虚线边框*/
            border: 3px dashed powderblue;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>

        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
</form>
</div>
</body>
</html>

结果图image

posted @ 2022-08-10 17:02  笑到肚子疼  阅读(14)  评论(0)    收藏  举报