制作登录页

效果展示：

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body,
        html{
            width: 100%;
            height: 100%;
        }

        .content{
            color: #FFFFFF;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 25%;
            height: 80%;
            position: absolute;
            margin: auto;

            background-color: #4ea4b3;
            background-image: linear-gradient(180deg, #4ea4b3 20%, #9599E2 57%, #5a5e9b 85%);

        }
        /*.box{*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    margin: 0 auto;*/
        /*    !*margin-left: 55px;*!*/
        /*}*/
        .title{
            height: 50px;
            line-height: 60px;
            text-align: center;

        }
        .photo{
        /*.photo input{*/
            position: relative;


            border-radius: 50%;
            border: 2px solid #c9c9c9;
            height: 100px;
            width: 100px;
            margin:30px  auto;
            /*margin-top: 30px  ;*/
            background-color: transparent;
            font-size: 56px;
            color: #ecf1f7;
            line-height: 100px;
            text-align: center;
            z-index: 1;
            /*cursor: pointer;*/
        }
        .photo input{
            position: absolute;
            border-radius: 50%;
            z-index: 9999;
            height: 100px;
            width: 100px;
            opacity: 0;
            margin:0px -65px;
        }
        .add{
            float: left;
            font-size: 56px;
            color: #ecf1f7;
            border-radius: 50%;
            height: 56px;
            width: 56px;
            line-height: 56px;
            text-align: center;
        }

        .pp{
            margin-top: 30px;
            font-size: 20px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            background: none;
        }
        a{
            text-decoration: none;
            color: #529BAA;
        }
        .text{
            width: 70%;
            /*height: 30%;*/
            margin: 0 auto;
        }

        input::-webkit-input-placeholder{
            color: #FFFFFF;
        }
        input{
            font-size: 20px;
            line-height: 60px;
            height: 60px;
            width: 100%;
            border: 0;
            border-bottom: 2px solid #999999;
            outline: none;
            background-color: transparent;

        }
        input:focus{
            outline: none;

        }
        .sign{

            margin: 0 auto;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            width: 70%;
            color: mediumpurple;
            background-color:#FFFFFF;
            border-radius: 35px;
            margin-top: 70px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="content">
<!--    <div class="box">-->
        <div class="title">Sign up</div>
        <div class="photo">+
            <input type="file">
        </div>

        <div class="text">
            <form action="#" method="post">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <p><input type="text" placeholder="请输入邮箱"></p>
            </form>
        </div>
        <div class="sign">Sign up</div>
        <p class="pp">Allready a member?
            <a href="#">Sign In</a>
        </p>
<!--    </div>-->
</div>

</body>
</html>
posted @ 2021-08-18 11:40  博客zhu虎康  阅读(74)  评论(0)    收藏  举报