用html实现一个静态登陆页面-可根据需求更改样式

缺乏、安全感 2023-10-03 22:27 18阅读 0赞

##### 一、创建html文件，vscode下载相关插件 #####

我们先选择一个文件夹创建login.html，.之前的文件命无所谓，.之后就必须为html或者htm。  
在编辑改文件输入!且出现提示后按回车或按tab快捷生成基础代码。  
![在这里插入图片描述][016b88da1f124a44b7b28a638a32ddf2.png]  
![在这里插入图片描述][2b9fbedfb4fb41909030182c3d363b1a.png]  
然后我们下载一个可以方便我们开发的插件。  
![在这里插入图片描述][e2272d8df8c84df4b3b4f6b6ad6d9a45.png]  
搜索之后点击一下然后下载即可。

##### 二、编写html标签 #####

我们以QQ登陆为例，需要分别输入账号和密码，还有输入完账号密码之后需要登陆，就还有一个登陆按钮，也就是总共3个Input框。  
代码如下：

<!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>
    <body>
        <div class="login">
            <form action="">
                <h2>我来组成标题</h2>
                <span>登陆：</span><input type="text">
                <span>密码：</span><input type="text">
                <span><input type="button" value="登陆"></span>
            </form>
        </div>
    </body>
    </html>

效果如下：  
![在这里插入图片描述][fdabc6c53a6e4a7fbcc2f46534b0153a.png]  
一个基本框架就搭建好了，现在我们就需要用css代码给页面进行美化。

##### 三、css代码 #####

<!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>
            * {
          
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            body {
          
                background: url('./bgc.png') no-repeat;
                background-size: 100%;
                font-family: '宋体';
            }
    
            a {
          
                text-decoration: none;
            }
    
            .login {
          
                width: 500px;
                height: 300px;
                background-color: rgba(150,143,172,0.3);
                margin: 150px 100px;
                text-align: center;
                padding: 30px;
                border-radius: 20px;
                box-shadow: 2px 2px 5px #000; /*阴影效果*/
            }
    
            .fstInput, .sndInput {
          
                width: 250px;
                height: 25px;
                color: rgb(61,54,64);
                text-align: center;
                outline: none;
                margin: 15px;
                background-color: rgba(0, 0, 0, 0.0);
                border: 0;
                border-bottom: 2px solid black;
                transition: 1s; /*宽度变化的过度时间*/
            }
    
            /* 过度动画，点击输入账号密码框之后会使输入框的下边框扩大 */
            .fstInput:focus, .sndInput:focus {
          
                width: 300px;
                border-bottom: 2px solid gray;
            }
    
            .register {
          
                display: block;
                margin-top: 10px;            
            }
    
            .btn {
          
                width: 100px;
                height: 30px;
                border-radius: 15px;
                border: 0;
                background-color: rgb(153,139,152);
            }
        </style>
    </head>
    <body>
        <div class="login">
            <form action="">
                <h2>遇事不决，可问春风</h2>
                <span><input class="fstInput" type="text" placeholder="请输入账号"></span><br>
                <span><input class="sndInput" type="password" placeholder="请输入密码"></span><br>
                <span class="register">还没有账号？<a href="">立即注册</a></span><br>
                <span><input class="btn" type="button" value="登陆"></span>
            </form>
    
        </div>
    </body>
    </html>

效果如图：  
![在这里插入图片描述][e4e568cae46c4de5969b01d14aeac159.png]

##### 四、根据自己需求需要更改的位置 #####

首先就是背景图片，可换成自己的其他背景。根据文件名和路径修改下方的background:url()即可  
![在这里插入图片描述][faba7295472445759c4eecdfa9efb5bb.png]  
修改了背景图片那就需要让输入框的位置更适合背景。修改.login里面的margin属性即可，或者需要更改整个表单的大小，也可以修改.login里面的width和height属性。  
![在这里插入图片描述][eabdb28c703c49f18f3e2e9b3e13cd63.png]

[016b88da1f124a44b7b28a638a32ddf2.png]: https://img-blog.csdnimg.cn/016b88da1f124a44b7b28a638a32ddf2.png
[2b9fbedfb4fb41909030182c3d363b1a.png]: https://img-blog.csdnimg.cn/2b9fbedfb4fb41909030182c3d363b1a.png
[e2272d8df8c84df4b3b4f6b6ad6d9a45.png]: https://img-blog.csdnimg.cn/e2272d8df8c84df4b3b4f6b6ad6d9a45.png
[fdabc6c53a6e4a7fbcc2f46534b0153a.png]: https://img-blog.csdnimg.cn/fdabc6c53a6e4a7fbcc2f46534b0153a.png
[e4e568cae46c4de5969b01d14aeac159.png]: https://img-blog.csdnimg.cn/e4e568cae46c4de5969b01d14aeac159.png
[faba7295472445759c4eecdfa9efb5bb.png]: https://img-blog.csdnimg.cn/faba7295472445759c4eecdfa9efb5bb.png
[eabdb28c703c49f18f3e2e9b3e13cd63.png]: https://img-blog.csdnimg.cn/eabdb28c703c49f18f3e2e9b3e13cd63.png