HTML+CSS登录界面

矫情吗；* 2022-11-13 12:22 174阅读 0赞

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMzEzNg_size_16_color_FFFFFF_t_70_pic_center]

***代码块***  
**html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登入</title>
        <link rel="icon" href="background/favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    <img class="background" src="background/blog.jpg">
    <div class="overall" id="overall">
        <div class="form">
            <div class="log">
                <p class="p1">登入</p>
            </div>
    
            <div class="logo">
                <img src="background/1.png" width="20px" height="20px" alt=""/>
                <input type="text" id="username" placeholder="输入用户名"/><br><br>
                <input type="password" id="password" placeholder="输入用户密码"/>
            </div>
    
            <div class="image">
                <img src="background/2.png" width="20px" height="20px" alt=""/>
            </div>
    
            <div class="login">
                    <input type="button" id="dengbutton" value="登入" onclick="login()">
                
            </div>
        </div>
    </div>
    </body>
    </html>

**css**

*{ 
        margin: 0;
        padding: 0;
    }
    
    /* 整体框架样式和位置布局*/
    #overall{ 
        width: 1200px;
        background-repeat: no-repeat;
        background-position: center center;
    }
    
    /* 表格表头布局 */
    .form .log .p1{ 
        display: inline-block;
        font-size: 28px;
        margin-top: 30px;
        width: 86%;
    }
    
    #overall .form .log{ 
        width: 86%;
        border-bottom: 1px solid #ee7700;
        margin-bottom: 60px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    }
    
    /* 表格位置和样式 */
    #overall .form{ 
        height: 408px;
        width: 368px;
        position: absolute;
        background-color: #FFFFFF;
        top: 20%;
        right: 15%;
    }
    
    /* 用户名文本框前面的图片布局 */
    .form .logo img{ 
        position: absolute;
        top: 12px;
        left: 8px;
    }
    
    /* 密码文本框前面的图片布局 */
    .form .image img{ 
        position: absolute;
        top: 209px;
        left: 35px;
    }
    
    /* 用户名和密码文本框布局 */
    .form .logo input{ 
        width: 95%;
        height: 42px;
        text-indent: 2.5rem;
    }
    
    #overall .form .logo{ 
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }
    
    /* 登入按钮布局 */
    .login input{ 
        width: 100%;
        height: 45px;
        background-color: #ee7700;
        border: none;
        color: white;
        font-size: 18px;
    }
    
    /* 登入文本框布局 */
    #overall .form .login{ 
        width: 86%;
        margin-top: 15px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
    
    
    #overall .form .login #rememberMe{ 
        margin-top: 10px;
        width: 10px;
        height: 10px;
    }
    
    .background{ 
        width: 100%;
        height: 932px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMzEzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/9b7c77cbea704e06967d0fde9885a6f5.png