Practical Training Demo1-登录界面（11.1）

以下内容为今日新编写以及新学习的登录界面的编写方法。

HTML内容部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/login-1.css" />
        <script type="text/javascript">
            window.onload = function() {
                var btns = document.querySelectorAll(".box .title a");
                var forms = document.querySelectorAll(".box .text form");
                // console.log(btns);
                for (var i = 0; i < btns.length; i++) {
                    // btns 它是一个集合
                    btns[i].onclick = function() {
                        // 查看i的数值
                        console.log(i);
                        for (var j = 0; j < btns.length; j++) {
                            btns[j].className = " ";
                        }
                        this.className = "active";
                        // 人为绑定数值
                        var idx = this.attributes["data-idx"].value;
                        console.log(idx);
                        for(var j = 0;j<forms.length;j++){
                            forms[j].style.display="none";
                        }
                        forms[idx].style.display="block";
                    }
                }
            }
        </script>
    </head>
    <body>
        <div class="content">
            <div class="box">
                <div class="right">
                    <!-- 顶部的两个东西 -->
                    <div class="title">
                        <a href="#" class="active" data-idx="0">登录</a>
                        <a href="#" data-idx="1">注册</a>
                    </div>
                    <div class="text">
                        <form action="#" method="post">
                            <div class="">
                                <input type="text" name="name" id="name" placeholder="请输入账号" />
                            </div>
                            <div class="">
                                <input type="password" name="pwd" id="pwd" placeholder="请输入密码" />
                            </div>
                            <div class="">
                                <input type="checkbox" checked="checked" name="chk" id="chk" />
                                <label for="chk">自动登录</label>
                            </div>
                            <!-- <div class="">
                            <input type="checkbox" name="chk2" id="chk2" />
                            <label for="chk2">忘记密码</label>
                        </div> -->
                            <div class="">
                                <input type="submit" value="登录" />
                            </div>
                        </form>
                        <form action="#" method="post">
                            <div class="">
                                    <input type="text" name="name" id="name" placeholder="请输入手机号码或邮箱" />
                                </div>
                                <div class="">
                                    <input type="password" name="pwd" id="pwd" placeholder="请输入密码" />
                                </div>
                                <div class="">
                                    <input type="text" name="yzm" id="yzm" placeholder="请输入验证码" />
                                    <span class="spa">获取验证码</span>
                                </div>
                                <div class="">
                                    <input type="submit" value="立即注册" />
                                </div>
                                <div class="">
                                    <input type="checkbox" checked="checked" name="chk" id="chk" />
                                    <label for="chk">我已阅读并同意《音悦Tai服务条款》</label>
                                </div>
                            <!-- <input type="submit" value="..." /> -->
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS内容部分：

*{
    margin: 0;
    padding: 0;
}
body{
    margin: 0;
}
.content{
    background-color: rgba(0,0,0,0.333);
    height: 600px;
    /* flex布局 */
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.content .box{
    width: 750px;
    height: 380px;
    background-image: url(../img/pop-bg.jpg);
    /* flex布局 */
    display: flex;
    /* flex-direction: column; */
    justify-content: flex-end;
}
.content .box .right{
    height: 300px;
    width: 300px;
    /* background-color: #CCCCCC; */
    margin-right: 50px;
    margin-top: 40px;
    padding: 20px;
}
.content .box .right .title{
    /*  */
    font-size: 0;
}
.content .box .right .title a{
    font-size: 20px;
    text-decoration: none;
    color: #333333;
    display: inline-block;
    width: 130px;
    text-align: center;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 15px;
}
.content .box .right .title .active{
    color: #27d5bf;
    border-bottom: 2px solid #27d5bf;
    padding-bottom: 14px;
}

.content .box .right .text{
    font-size: 16px;
}

.content .box .right .text div{
    margin: 20px 0;
}
.content .box .right .text div input[type=text],
.content .box .right .text div input[type=password]{
    width: 260px;
    height: 28px;
    border-radius: 4px;
    outline: 1px solid #CCCCCC;
    border: none;
}
.content .box .right .text div input[type=text]:focus,
.content .box .right .text div input[type=password]:focus{
    outline: 1px solid #27d5bf;
    /* transparent--透明 */
    border-color: transparent;
}
.content .box .right .text div input[type=submit]{
    width: 260px;
    height: 32px;
    color: #fff;
    background-color: #27D5BF;
    border: none;
    font-size: 20px;
}
/* 显示其中一个 隐藏其他的 */
.content .box .right .text form{
    display: none;
}
.content .box .right .text form:first-child{
    display: block;
}
.content .box .right .text #yzm{
    width: 130px;
}
.content .box .right .spa{
    width: 125px;
    line-height: 28px;
    /* 转化为一行的块级标签 */
    display: inline-block;
    text-align: center;
    background: #999999;
    border-radius: 4px;
    color: #666;
    /* middle中间 */
    vertical-align: middle;
}

以下内容为：另一个登录中的JavaScript内容的其一；

JavaScript内容部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/login.css" />
        <script type="text/javascript">
            window.onload = function() {
                // document.querySelectorAll() 满足条件返回的是全部 这个是一个是找到全部的
                // querySelector 满足条件 返回 的第一个 
                //按钮 
                var btn = document.querySelector("button");
                btn.onclick = function() {
                    var box = document.querySelector(".box");
                    box.style.display = "flex";
                }
                // x的部分（关闭的部分）
                var close = document.querySelector(".close");
                close.onclick = function() {
                    var box = document.querySelector(".box");
                    box.style.display = "none";
                }
            }
        </script>
    </head>
    <body>
        <!-- 小样 -->
        <button type="button">显示登录框</button>
        <div class="box">
            <div class="content">
                <span class="close">&times;</span><!-- &times; x -->
            </div>
        </div>
    </body>
</html>

另＋CSS内容部分（与JavaScript的一起）：

*{
    margin: 0;
    padding: 0;
}
/* body可以显示滚动条  box不可以--遮罩层 */
.box{
    width: 100%;
    height: 600px;
}
body{
    position: relative;
}
/* 写死 */
.box{
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.333);
    /* felx布局 
    -三步骤
    -1.display: flex;--先写出flex
    2.justify-content: space-around; ---相当于整体分布 
    3.align-items: center;  内容的水平居中 
    */
    display: flex;
    /* justify--布局 space-around--内容布局方式--相当于整体分布 */
    justify-content: space-around;
    /* 内容的水平居中 */
    align-items: center;
    /* 不显示 */
    display: none;
}

.box .content .close{
    float: right;
    width: 16px;
    display: block;
}

.box .content{
    width: 750px;
    height: 380px;
    background-color: #FFFFFF;
}

posted @ 2021-11-01 18:54 小张同学的派大星吖阅读(24) 评论(0) 编辑收藏举报

刷新页面返回顶部

张凯月

Practical Training Demo1-登录界面（11.1）

公告