利用html&css制作简单登录页面

最新推荐文章于 2023-04-25 19:37:58 发布

ZIUPAN

最新推荐文章于 2023-04-25 19:37:58 发布

阅读量632

点赞数 3

分类专栏： html&css

本文链接：https://blog.csdn.net/m0_46437725/article/details/115681178

版权

html&css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考网上别人做出来的实例：
在这里插入图片描述
做出来的效果：

下面是html代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            ziupan
        </title>
        <link rel="stylesheet" href="首页.css">
    </head>
    <body>
        <div id="main">
            <div id="avater">

            </div>
            <div id="account">
                <div class="input-box"><input type="text" placeholder="用户名"></div>
                <div class="input-box"><input type="password" placeholder="密码"></div>
                <div class="forget_a"><a href="#" >忘记密码？</a></div>
            </div>

            <button class="login-btn">登录</button>


            <div id="footer">
                <a href="#">还不是会员?</a>
                <a style="color: #015b7e">立即注册</a>
            </div>
        </div>
    </body>
</html>

css代码：

@charset "utf-8";
/*登陆区主体*/
#main{
    border: thin solid #ededed;
    width: 350px;
    height: 600px;
    background: #fff;
    margin: 40px auto;
    /*border-top: 8px solid #015b7e;;*/
    position: relative;
}
/*头像区*/
#avater{
    width: 185px;
    height: 185px;
    background: url("webp1.png") no-repeat;
    background-size: cover;
    margin: 50px auto;
    border: thin solid #ededed;
    border-radius: 50%;
}

/*账号密码区*/
#account{
    width: 75%;
    line-height: 50px;
    /*height: 200px;*/
    /*background: #ffd1e4;*/
    margin: 0 auto;
}
#account .input-box{
    height: 50px;
    border: 1.5px solid #cccccc;
    /*background: #ffbcdd;*/
}
#account .input-box input{
    height: 40px;
    width: calc(100% - 10px);
    border: none;
    outline: none;
    padding: 0 5px;
    /*background: rgba(0,0,0,0.5);*/
    color: #ffcae5;
    font-size: 16px;
    font-weight: bold;
}

/*登录按钮*/
.login-btn{
    width: 75%;
    height: 40px;
    display: block;
    margin: 30px auto;
    background:#015b7e ;
    border: none;
    outline: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
/*按下按钮*/
.login-btn:active{
    position: relative;
    top:2px;
}

/*登陆区底部*/
#footer{
    background: #f5f5f5;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
    /*border-top: 1px solid #ccc;*/
}

.forget_a{
    text-align:right;
}

.forget_a>a{
    color:#cccccc;
}

#footer a{
    color: #cccccc;
    text-decoration: none;
}
#footer a:hover{
    color: red;
}

ZIUPAN

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用html&css制作简单登录页面

参考网上别人做出来的实例：做出来的效果：下面是html代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title> ziupan </title> <link rel="stylesheet" href="首页.css"> &l
复制链接

扫一扫