HTML+CSS登录界面

最新推荐文章于 2024-08-01 12:02:26 发布

瞬间H

最新推荐文章于 2024-08-01 12:02:26 发布

阅读量1.5k

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43923136/article/details/115254367

版权

HTML CSS 登录页面前端开发用户界面

关键词由CSDN通过智能技术生成

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图

代码块
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()">
            <!--<input type="checkbox" id="rememberMe" checked="checked"/>记住密码-->
        </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;
}