前端登录界面

落日映苍穹つ 2023-09-29 16:29 16阅读 0赞

## 一、前端代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <style>
            #div1{
          
                margin-top: 15%;
            }
            p{
          
                font-size: 25px;
                font-family: 华文彩云;
    
            }
            .ty1{
          
                width: 300px;
                height: 40px;
                margin-top: 5px;
                background-color:transparent;
                border:0;
            }
            .ty2{
          
                width: 300px;
                height: 40px;
                color: white;
                background-color: orangered;
                margin-top: 5px;
                border:0;
            }
            .bjimg {
          
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -10;
                object-fit: cover;
    
            }
    
        </style>
    </head>
    <body>
    <video src="../video/愤怒的小鸟.mov" class="bjimg" autoplay loop muted></video>
    <div id="div1" align="center">
        <p>密码登录 短信登录</p>
        <form action="#" method="post">
            <input type="text" name="username" placeholder="会员名、邮箱、手机" class="ty1"><br>
            <input type="password" name="password" placeholder="请输入密码" class="ty1"><br>
            <input type="submit" value="登  录" id="sub1" class="ty2">
        </form>
    </div>
    </body>
    </html>

## 二、界面 ##

![在这里插入图片描述][2231836e280f4a25b29a49bf8cfb0e82.jpeg_pic_center]

##### 注意：代码里面的背景视频需要设置成自己的路径 #####

[2231836e280f4a25b29a49bf8cfb0e82.jpeg_pic_center]: https://img-blog.csdnimg.cn/2231836e280f4a25b29a49bf8cfb0e82.jpeg#pic_center