登录样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        margin: auto;
        margin-top: 50px;
        width: 320px;
        height: 420px;
        background-color: #FCE7EA;
        border-top: 3px solid #77C7EA;
        border-left: 1px solid #77C7EA;
        border-right: 1px solid #77C7EA;
    }
    .main{
        width: 320px;
        height: 320px;
        border: 1px solid #DDDDDD;
    }
    .user .myuser{
        margin-top: 30px;
        margin-left: 30px;
        position: relative;
    }
    .main img{
        float: left;
    }
   .user input{
        border: 1.8px solid #DDDDDD;
        background-color: #FCE7EA;
        height: 39px;
        width: 200px;
    }
    .choose{
        margin-top: 30px;
        margin-left: 30px;
    }
    .choose span{
        font-size: 12px;
        color: #DDDDDD;
        margin-left: 10px;
    }
    .choose span:hover{
        color: gray;
    }
    .sub{
        margin: 30px 30px;
    }
    .mycheckbox{
        background-color: gray;
    }
    .buttom{
        margin: 30px 35px;
    }
    .buttom span{
        font-size: 14px;       
    }
    .buttom img{   
        margin-left: 3px;
    }
</style>
<body>
    <div class="container">
        <div class="main">
            <div class="user">
                <div class="myuser">
                    <div class="myImage">
                        <img src="./images/zhanghao.jpg" alt="">
                    </div>
                    <div class="username">
                        <input type="text" placeholder="用户名/邮箱/地址/手机号">
                    </div>
                </div>
                <div class="myuser">
                    <div class="myImage">
                        <img src="./images/mima.jpg" alt="">
                    </div>
                    <div class="password">
                        <input type="text" placeholder="请输入密码">
                    </div>
                </div>
            </div>
            <div class="choose">
                <input class="mycheckbox" type="checkbox"  name="x1" value="remember">记住密码
                <span>欢迎注册</span>
                <span>忘记密码</span>
            </div>
            <div class="sub">
                <img src="./images/but.jpg" alt="">
            </div>
        </div>
        <div class="buttom">
            <span>合作网站账号登录:</span>
            <img src="./images/weixin.png" alt="">
            <img src="./images/qqlogin.png" alt="">
            <img src="./images/taobao.png" alt="">
        </div>
    </div>
</body>
</html>

相关阅读:
图片滚动懒加载用jquery-lazyload 与手动Jquery 写
 穿梭框（filter过滤方法，sort排序 v-model）
选择添加好友（包含去重，删除splice 等） v-show(解决显示隐藏闪动问题)
求数组中最小的数值（结合apply() call()）
Vue
js递归
 使用kdf 元素来接收键盘的输入指令
 编辑滚动条样式
 【IntelliJ IDEA】Debug调试的使用记录
 福利：IntelliJ IDEA 破解激活教程
原文地址：https://www.cnblogs.com/Sherlockmmc/p/14689648.html