响应式登录界面仿写练习（附源码）

白云好懒

已于 2022-03-29 11:01:10 修改

阅读量1.1k

点赞数 3

分类专栏：前端学习文章标签： css html css3

于 2022-03-12 18:19:02 首次发布

本文链接：https://blog.csdn.net/loveforlongtime/article/details/123447822

版权

前端学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

最近学完HTML和css想多仿写练习一下，在B站看到过很多登录界面。今天也是仿写了一个。巩固一下所学的知识。也是花了一个小时多，最大的感悟就是关于配色的问题，一直都不满意，有空还是去向大佬学习一下。

下面话不多说上效果图和源码。背景图来源于网络，这里也是简单设置了一下视口变小后的样式。

<!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: 0px;
        padding: 0px;
    }
    body {
      margin: 0;
      padding: 0px;
}
    .out{
        width: 100vw;
        height: 100vh;
        background-image: url(./img/prac.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login-content{
        width: 800px;
        height: 360px;
        border-radius: 10%  0 0 10%;
        padding: 30px;
        box-sizing: border-box;
        position: relative;
        background: linear-gradient(to right, rgb(235, 221, 160), #ca7d09);
        opacity: 0.8;
       
     
    }
    .left{
        width: 500px;
        height: 100%;
        background-image: url(./img/prac.jpg);
        border-radius: 10%  0 0 10%;
        background-position: -100px;
        opacity: 0.7;
    }
    .right{
        width: 400px;
        height: 300px;
        position: absolute;
        top: 30px;
        right: 30px;
        display: flex;
        flex-direction: column;
        border-radius: 30px;
        background: linear-gradient( #EBE1C0,#d8c045);
       
       
    }
   .right input{
       
       width: 180px;
       height: 30px;
       margin: 10px auto;
       padding: 5px;
       border-radius: 20px;
   
   }
   .right>h1{
       margin: 30px auto;
   }
   .right>button{
       width: 100px;
       height: 30px;
       margin: 10px auto;
       background-color: rgba(235, 213, 119,.5);
       font-size: 20px;
       border-radius: 10px;
   }
   @media screen and (max-width:700px){
       .out{
           background-position: -150px;
       }
       .right{
           background-image: url(./img/prac.jpg);
       }
       .login-content{
        background: linear-gradient(rgb(235, 221, 160), #787a07);
       }

       
   }

</style>
<body>
    <div class="out">
        <div class="login-content">
            <div class="left"></div>
            <div class="right">
                <h1>Login</h1>
                <input type="text" placeholder="Username">
                <input type="password"  placeholder="Passwords">
                <button>登录</button>
            </div>
        </div>





    </div>
 
    
</body>
</html>