前端静态页面--登录页面 原创

发布于 2022-7-21 16:40
浏览
0收藏

@toc

1.登录页面

前端静态页面--登录页面-开源基础软件社区

1.1布局+碰到的问题

1.一张图为背景,当时碰到一个问题就是图片进行了拉伸,其大小就是保持了auto属性,一般网页的大小是1024*768,而图片的宽度大小超过了容器本身的大小,因而图片会出现偏移。
这种情况下,使用==background-size: cover==,图像将被调整大小以适合容器,++但是注意cover这个属性值则一定会保证图片的原宽高比,并保证一定会覆盖整个背景,但是由于这种原因,如果背景和图片的宽高比不一致那么会裁剪图片++
前端静态页面--登录页面-开源基础软件社区

2.头像为div盒子,设置border-radius即可
3.对于Input内输入图标,我一般用背景图四件套则可完成

  	background-image: url(./images/user.png);
        background-repeat: no-repeat;
        background-position: 10px ;
        background-size: 15px;

4.总结一下background-position(方便自己以后查看)

  • 坐标轴属性值有两个,x和y
  • 设置一个值的时候表示x轴的移动,y轴为默认居中
  • 也可以直接设置center居中、left top左上角等

5.还有一个重点,中间盒子为透明,但是只是盒子透明,而盒子里的元素是不改变透明度的,因此不能用opacity,opacity会使盒子+盒子内元素一起透明。 用==background-color: rgba(255, 255, 255, 0.6);==让盒子背景透明即可。

2.代码如下:

<!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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-image: url(./images/back.jpg);
            background-size: cover;
        }
        h1{
            color:#ffffff;
            text-align: center;
            margin-top: 30px;
        }
        .box{
            width: 303px;
            height:400px;
            background-color: rgba(255, 255, 255, 0.6);
            margin: 48px auto;
            border-radius: 12px;
        }
        .box1{
            width: 302px;
            height: 132px;
           
           
        }
       .box1 img{
        border-radius: 100px;
        width: 100px;
        height: 100px;
        /* margin: 30px auto; */
        margin: 30px 100px 25px 100px;
        
       }
       input{
        width: 222px;
        height:26px;
        border-radius:6px;
        margin: 25px 40px 0px 40px;
        text-indent: 29px;
        border: 1px solid #aaaaaa;
        outline: none;

       }
       #name{
        background-image: url(./images/user.png);
        background-repeat: no-repeat;
        background-position: 10px ;
        background-size: 15px;

       }
       #secret{
        background-image: url(./images/lock.png);
        background-repeat: no-repeat;
        background-position: 10px ;
        background-size: 15px;
       }
       #submit{
        width: 220px;
        height: 30px;
        background-color: #9acd32;
        color: #ffffff;
        margin: 25px 40px 0px 40px;
        font-size: 14px;
        border-radius: 6px;
        border: none;
        outline: none;
       }
       #register{
        width: 220px;
        height: 30px;
        background-color: #dc143c;
        color: #ffffff;
        margin: 25px 40px 0px 40px;
        font-size: 14px;
        border-radius: 6px;
        border: none;
        outline: none;
       }
       p{
        font-size: 13px;
        margin: 15px 40px 30px 145px;
        font-weight: bold;
       }
    </style>
</head>
<body>
        <h1>Hello! Welcome to DouZzhi-IT!</h1>
        <div class="box">
            <div class="box1">
                <img src="./images/Boy.jpg" alt="">
            </div>
            <input id="name"  type="text" placeholder="Username">
            <input id="secret" type="text" placeholder="Password">
            <button id="submit">Submit</button>
            <button id="register">Register</button>
            <p>Forget Password?</p>
        </div>
</body>
</html>

3.相似练习

前端静态页面--登录页面-开源基础软件社区

代码如下:

<!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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
          
            background-image: url(./images/back1.jpg);
            background-size: cover;
        }
        h1{
            color:#ffffff;
            text-align: center;
            margin-top: 120px;
            font-size: 55px;
        }
        .box{
            margin: 60px auto 280px ;
            width: 800px;
            height: 440px;
            border-radius: 4px;
            overflow: hidden;
        }
        .box1{
            width: 340px;
            height: 440px;
            background-color: #e06965;
            float: left;
            
        }
        .box11{
            width: 157px;
            height:140px;
            margin:40px  auto 100px ;
            text-align: center;
        }
        .box11 p{
            font-size: 22px;
            color:#fffdf6;
            letter-spacing: 10px;
        }
        .box2{
            width: 460px;
            height: 440px;
            background-color: #ffffff;
            float: left;
            overflow: hidden;
        }
        .list{
            color: #fbf0de;
            margin-top: 90px;
            margin-left: 60px;
            list-style: circle;
            list-style-position: inside;
        }
        .list li{
            font-size:11px;
            height: 35px;
            
        }
        .box input{
            width: 400px;
            height: 40px;
            border: none;
            border: none;
            outline: none;
            border-bottom: 2px solid #cecfd3;
            margin: 5px 1px 10px 20px;
        }
        .box2 h2{
            color: #d4d8d9;
            font-size: 20px;
            /* overflow: hidden; */
            margin: 42px 200px 40px 43px;
            color: #e35e59;
        }
        .box2 h2 span{
            color: #cecfd3;
        }
        button{
            width: 77px;
            height: 35px;
            border-radius: 17px;
            background-color: #ffffff;
            color: #e35e59;
            outline: none;
            border:2px solid #e35e59;
            /* border: #e35e59; */
            margin: 40px auto auto 20px;
        }
        #name,#email,#password{
        background-image: url(./images/user.png);
        background-repeat: no-repeat;
        background-position: 380px ;
        background-size: 15px;

       }
    </style>
</head>
<body>
    <h1>Hello! Welcome to DouZzhi-IT!</h1>
    <div class="box">
        <div class="box1">
            <div class="box11">
                <img src="./images/logo1.png" alt="">
                <p>Welcome</p>
            </div>
            <ul class="list">
                <li>Simple create your calendar</li>
                <li>Add content for each days</li>
                <li>Share it to the world(become a rockstar)</li>
            </ul>
        </div>
        <div class="box2">
            <h2>Login <span>/ Sign Up</span></h2>
            <input type="text" id="name" placeholder="Your Name">
            <input type="text" id="email" placeholder="Email">
            <input type="text" id="password" placeholder="Password">
            <button>LOGIN</button>
        </div>
    </div>
   
</body>
</html>

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
布局.zip 2.66M 4次下载
已于2022-7-21 17:31:29修改
1
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐