html部分代码：

    <img src="bg.jpg" alt="背景图片">
    <main>
        <header>
            <span id="goGack">返回</span>
            登录
            <span id="register">注册</span>
        </header>
        <section id="img"></section>
        <section id="acount">
            账号&#x3000;2345678@qq.com
        </section>
        <section id="password">
            密码&#x3000;<span>&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;</span>
        </section>
        <section id="login">登&#x3000;录</section>
        <section id="forget">忘记密码？</section>
        <section id="login3">
            <img src="weibo.png" alt="">
            <img src="qq.png" alt="">
            <img src="weixin.png" alt="">
        </section>
    </main>

css部分代码：

        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            height: 100%;
            background-color: #333;
            overflow: hidden;
            color: #ddd;
            text-align: center;       
        }
        body>img{
            position: absolute;
            top: -20px;
            left: -200px;
            height: 100%;
            /*滤镜*/
            filter: blur(20px);
            opacity: 0.9;
        }
        main{
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        header{
            font-size: 1.1rem;
            line-height: 3rem;
            position: relative;
        }
        header span{
            font-size: 0.9rem;
        }
        #goGack{
            position: absolute;
            left: 0.8rem;
            top: 0.01rem;
        }
        #register{
            position: absolute;
            right: 0.8rem;
            top: 0.01rem;
        }
        #img{
            /*vw viewpoint width 视窗宽度 1vw等于视窗宽度的1%
              vh viewpoint height 视窗高度 1vh等于视窗高度的1%*/
            width: 32vw;
            height: 32vw;
            background-image: url(img.jpg);
            background-size: 120% 120%;
            background-position: 50% 50%;
            border-radius: 50%;
            max-width: 14rem;
            max-height: 14rem;
            margin: 8vh auto;
        }
        #acount,
        #password{
            width: 70vw;
            height: 3rem;
            margin: 0 auto;
            text-align: left;
            border-bottom: 1px solid white;
            padding-top: 1rem;
        }
        #password span{
            font-size: 0.7rem;
            /*letter-spacing 属性增加或减少字符间的空白*/
            letter-spacing: 0.3rem;
        }
        #login{
            width: 70vw;
            height: 2.5rem;
            background-color: #33aa65;
            margin: 5vh auto 8vh;
            padding-top: 0.4rem;
            font-size: 1.1rem;
            border-radius: 0.8rem;
        }
        #forget{
            font-size: 0.9rem;
        }
        #login3{
            margin: 4rem auto 0.2rem;
        }
        #login3 img{
            width: 4rem;
            height: 4rem;
            margin: 0 0.5rem;
        }

下面这个是可以输入的：

HTML:

<section id="img"></section>
    <form action="#">
        <div class="controls">
            <span>账号</span>
            <!--使用这种方式不如label标签-->
            <input type="text" placeholder="请输入账号">
        </div>
        <div class="controls">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        <div>
            <input type="button" value="登 录">
        </div>
    </form>
    <a href="#" id="forget">忘记密码？</a>
    <a href="#" id="register">注册新用户</a>

CSS:

        *{
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            margin: 0;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
        }
        #img{
            width: 33vw;
            height: 33vw;
            background-image: url(img.jpg);
            background-size: 48vw auto;
            background-position: 50% 50%;
            margin: 10vh auto 5vh auto;
            border-radius: 50%;
        }
        input{
            border: none;
            padding: 3px;
            height: 30px;
        }
        form{
            margin: 0 auto;
            width: 72vw;
        }
        .controls{
            border-bottom: 1px solid gray;
            padding: 1vh 0;            
        }
        .controls input{
            width: 8em;
        }
        span,label,input{
            font-size: 0.9rem;
        }
        input[type=button]{
            width: 100%;
            height: 2.5rem;
            background-color: #339944;
            color: white;
            margin-top: 2vh;
            border-radius: 5px;
            font-size: 1rem;
        }
        #forget{
            display: block;
            text-align: center;
            font-size: 0.8rem;
            text-decoration: none;
            color: gray;
        }
        #register{
            display: block;
            text-align: center;
            font-size: 0.9rem;
            text-decoration: none;
            color: #888;
        }

演示效果

一个假的App登录页面（响应式模式下看）

这个是真的可以输入的