这样写可以不-慕课网

这样写可以不

来源：4-1 编程挑战

VisaW

2018-01-12 21:39

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        div {
            width: 200px;
            height: 350px;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #000;
            margin-top: 20px;
        }

        form {
            width: 100%;
            height: 100%;
            background-color: #ebf3fa;
            padding: 20px;
            box-sizing: border-box;
        }

        input {
            width: 100%;
            height: 10%;
            box-sizing: border-box;
            border: 2px solid #eee;
            text-align: center;
            margin-bottom: 20px;
        }

        input[type=checkbox] {
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }

        label {
            display: inline-block;
            line-height: 30px;
        }
        
        .login {
            background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg) no-repeat;
            background-size: 120% 460%;
        }
        
        .reg {
            background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg) no-repeat;
            background-position: 0 -105px;
            background-size: 110% 500%;
        }
    </style>
</head>

<body>
<div>
    <form>
        <input type="text" placeholder="邮箱/手机号/用户名" />
        <input type="password" placeholder="请输入密码" />
        <label><input type="checkbox" />下次自动登录</label>
        <input type="button" class="login"/>
        <hr />
        <br>
        <input type="button" class="reg"/>
    </form>
</div>
</body>
</html>

感觉好像把图片拉变形了……

写回答关注