Html登录页面

最新推荐文章于 2024-06-11 11:30:38 发布

丽绮

最新推荐文章于 2024-06-11 11:30:38 发布

阅读量312

点赞数

分类专栏： HTML 文章标签： html css3 javascript

本文链接：https://blog.csdn.net/qq_59861678/article/details/128223465

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>知乎登录页</title>
    <link rel="stylesheet" href="./ZhiHuEnter.css">
</head>
<body>

    <div class="Page">
        <div class="Page01">
            <header>
                <a href="">密码验证登录</a>
                <a href="">密码登录</a>
            </header>
    
    
    
            <section class="Page_section01">
                <div class="Page_INPUT01">
                    <input type="text" placeholder="手机号码">
                </div>
                <div class="Page_INPUT01">
                    <input type="password" placeholder="请输入密码">
                </div>
            </section>

            <section class="Page_section02">
                <a class="Left01" href="">海外手机号登录</a>
                <a class="Right01" href="">忘记密码</a>
            </section>

            <section class="Page_section03">
                <input type="button" value="登录">
            </section>

            <section class="Page_section04">
                <p>其他登录方式</p>
            </section>
    
    
    
            <footer>
                <p>未注册手机验证后自动登录,注册即代表同意《知乎协议》《隐私保护指引》</p>
            </footer>
        </div>
    </div>
</body>
</html>

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(200, 197, 197);
}

.Page {
    background-color: #FFFFFF;
    width: 350px;
    height: 550px;
    margin: 50px auto;

}

.Page01 {
    margin: 0 25px;
    padding-top: 30px;
}


header {
    margin-bottom: 30px;
}

a {
    /*去除超链接下划线*/
    text-decoration: none;
}

.Page_INPUT01 {
    /* 下边框 */
    border-bottom: 1px solid #EEEEEE;
    /* width: 300px; */
    height: 40px;
    /* margin: 0 auto; */
}

.Page_INPUT01 input {
    width: 300px;
    height: 40px;
    outline: 0;
    /*系统自带的线宽设置为0*/
    border: 0;
    /*边框线设为0*/

}

.Right01 {
    /* 向右浮动 */
    float: right;
}

.Page_section01 {
    padding-bottom: 10px;
}

.Page_section03 input {
    border: 1px solid blue;
    height: 30px;
    width: 300px;
    margin-top: 30px;
    background-color: #056DE8;
    border-radius: 5px;
    /*将边框四个角变成圆角*/

}

header a {
    font-size: 15px;
}

/* :hover鼠标放上去输出一下效果 */
header a:hover {
    font-weight: 1000;
    font-size: 18px;
}

.Page_section02 a {
    font-size: 10px;
}

header a,
.Page_section02 a {
    color: black;
}


.Page_section04 {
    /* 相对定位 */
    position: relative;
    margin-top: 60px;
    border-top: 1px solid #AAAAAA;

    margin-bottom: 50px;
}

.Page_section04 p {
    /* width: auto; */
    /* height: 50px; */
    background: #FFFFFF;
    /* text-align: center; */
    line-height: 50px;
    font-size: 15px;
    color: #666666;
    /* 绝对定位 */
    position: absolute; 
    top: -25px;
    left: 35%;
}

footer p {
    font-size: 12px;
}