当前位置：网站首页>登录页面 + 总结心得

登录页面 + 总结心得

2022-07-24 05:17:00 【ps笔记】

学习了一段时间，今天用 js+css+html 三个文件，从排版到写代码到三者相互引入嵌套完成。

第一步：先创建一个html文件，然后在里面写body的代码：如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面登录</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="login-box">
            <div class="toubu">
                    <a class="zhanghu" href="#">账户密码登录</a>
                    <div></div>
                    <a class="shouji" href="#">手机验证码登录</a>
                </div>
            <h1></h1>
        <div class="input-box">
            <img class="pic" src="images/1.jpg" alt="">
            <input type="text" placeholder="请输入手机号码" maxlength="11" @blur="validatePhone" v-model="phone">
        </div>
        <div class="input-box">
            <img class="pic" src="images/2.jpg" alt="">
            <input type="password" placeholder="请输入密码"  @blur=" " v-model="password" >
        </div>
        <button @click="tiaozhuan">登录</button>
        <div class="dibu">
            <a class="wwanjimima" href="#">忘记密码 ? </a>
            <div></div>
            <a class="xinyonhuzc" href="#">新用户注册</a>
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="fun.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

第二步：在创建一个css文件，然后在里面写style代码：如下：

body{
    background-color:#637FFF;
}
#login-box{
    background-color: white;
    border-radius: 13px;
    text-align: center;
    margin: 0px auto;
    margin-top:100px;
    width: 350px;
    height: 400px;
}

#login-box h1{
    padding-top:60px;
    color: rgb(204, 201, 201);
}
#login-box .toubu{
    padding-top: 20px;
    margin-top: 100px;
}
#login-box .toubu div{
    display: inline-block;
    width: 100px;
}

.pic{
    position: absolute;
    margin: 0px auto;
}

#login-box .input-box {
    margin-top:15px;
}



#login-box .input-box input{
    border:none;
    background: none;
    border-bottom:rgb(202, 199, 199) 2px solid;
    padding: 5px 10px ;
    outline: none;
    color:rgb(156, 153, 153);
    padding-left:30px;
}

#login-box button{
    margin-top: 30px;
    width: 148px;
    height: 37px;
    border-radius: 20px;
    outline: none;
    border: none;
    background-image:linear-gradient(180deg, #637aFF 0% , #334AC8 100%);
    color: #ffff


}

.dibu{
    margin-top: 60px;
}
.dibu div{
    display: inline-block;
    width: 128px;
}

#login-box a{
    text-decoration: none;
    color: rgb(131, 128, 128)
}

#login-box a:hover{
    
 
    border-bottom: 3px solid rgb(105, 140, 236);
    padding-bottom: 8px;

   
}

第三步：在创建一个js文件，然后在里面写 script 代码：如下：

var app = new Vue({
    el: "#login-box",
    data: {
        phone: "",
        password:"",
    },
    methods: {
        validatePhone: function(){
            if(this.phone.length!=11 || this.phone.substring(0,3)!='138'){ 
                alert("请输入138开头的号码");
            }
        },
        validatePassword: function(){
            if(this.password.length < 6 
            || this.password.search("[A-Z]") == -1
            || this.password.search("[a-z]")==-1
            || this.password.search("\\.")==-1){
                alert("必须要有1个大写，1个特殊符号：”.“,密码含数字和字母，长度需要大于6位");
            }
        },
        tiaozhuan: function(){
            window.location.href='http://baidu.com';
        }
    }
})

最终效果页面展示如下：