HTML+CSS+JavaScript网页登录界面制作（附源代码）

今天好像不上班

于 2024-10-07 19:30:50 发布

阅读量456

点赞数 18

分类专栏： Html+Css+js 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_72934718/article/details/142744938

版权

Html+Css+js 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Html文件一般是写网页标签的，也就是编写网页的骨架，Html文件还可以指定其引用的Css、JavaScript文件

Css文件是设置样式的，就是大小、颜色、位置等

JavaScript文件一般是处理交互或与后端通信的

下面分两个部分深入介绍前端网页的工作原理

1、浏览器加载网页

2、浏览器运行网页

一个网页就HTML+CSS+JavaScript三种文件

1、浏览器是如何加载网页

在浏览器输入网址，通过网址的协议、域名、端口部分与服务器（Nginx等）建立连接，之后，服务器会根据路径部分寻找对应的网页资源并将其发送给浏览器

网址请求返回的一般是Html文件或者Html格式的内容（动态网站PHP返回Html格式的内容）

浏览器接收和处理Html文件的过程是流式的

也就是说，浏览器每接收到一部分内容就会处理一部分（Html的标签是一对一对的是为了方便流式处理）

当发现Html文件中需要下载其他资源时会开始下载其他资源，包括Css、JavaScript、图片文件等

值得注意的是，资源文件的下载都是异步的，不会等一个资源下载完再开始下一个资源的下载。

所以，为了避免JavaScript报错，其初始化的一些操作一般是放在onload事件之后的（确保此时资源文件都加载完毕）

2、浏览器是如何显示网页

浏览器显示网页大概有4步骤

构建Dom树、构建呈现树（render tree）、布局处理、绘制

构建Dom树就是解析Html文件，并把元素标签转换成Dom节点（一种数据结构）

呈现树是网页显示部分的数据结构

构建呈现树就是会解析Css文件和元素标签中的样式属性以完善呈现树

由于Css文件会影响呈现树的构建，所以一般放在Html文件的头部引用（<head></head>），这样就会不会出现网页一瞬间混乱（之后又好了）的情况

之后的布局处理会根据当前的浏览器窗体大小，计算出每一个元素的确切坐标

最后的绘制阶段，就是把网页描画出来。

当然，这个过程也不是一次性完成的，为了尽快显示网页，浏览器完成一部分内容解析后，即会把该部分显示出来

以上是Html文件、Css文件的处理，那JavaScript文件呢

JavaScript文件会被浏览器的JavaScript解析器处理

JavaScript有两个作用，一是处理交互、二是与后端通信

其中需要特别说明的是，

JavaScript处理交互时，往往会修改页面的元素（如按钮变色等）

此类操作都被称为DOM树操作（JavaScript是无法修改CSS内容的）

而DOM树操作说白了就是对HTML内容进行修改

或者说是修改了DOM树的数据

当DOM树数据被修改后，上面提到的网页显示过程就会重新执行一遍

由于JavaScript会影响DOM树的构建，所以一般放在Html文件的底部引用，这样有利于网页尽快显示出来

下面介绍一个html+css+js的登录页面设计，附源代码；

样式图

<!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="style.css">
        <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
    </head>
    <body>    
        <div id="app" class="container"><img src="./bg.jpg" alt="">        
            <div class="panel">            
                <div class="content login">                
                    <div class="switch">                    
                    <span :class='{"active":active === "login"}' @click="go('login')">登录</span>                    
                    <span>/</span>
                    <span :class='{"active":active === "register"}' @click="go('register')">注册</span>                
                </div>
                <div class="form" id="fromLogin"><!-- 如果按钮选择的是注册就展示这个里面的内容 -->                    
                    <template v-if="active === 'register'">                        
                        <div class="input">                            
                            <input :class="{hasValue : registerForm.email}" v-model="registerForm.email" type="text" name="email" id="email">                            
                            <label for="email">邮箱</label>                        
                        </div>                        
                        <div class="input">                            
                            <input :class="{hasValue : registerForm.Username}" v-model="registerForm.Username" type="text" name="Username" id="Username">                            
                            <label for="email">用户名</label>                        
                        </div>                        
                        <div class="input">                            
                            <input :class="{hasValue : registerForm.Password}" v-model="registerForm.Password" type="text" name="Password" id="Password">                            
                            <label for="email">密码</label>                        
                        </div>                        
                        <div class="input">                            
                            <input :class="{hasValue : registerForm.repeat}" v-model="registerForm.repeat" type="text" name="Passwordrepeat" id="Passwordrepeat">                            
                            <label for="email">重复密码</label>                        
                        </div>                    
                    </template>                    
                    <!-- 如果按钮选择的是登录就展示这个里面的内容 -->                                    
                     <template v-if="active === 'login'">                        
                        <div class="input">                            
                            <input :class="{hasValue : loginForm.Username}" v-model="loginForm.Username" type="text" name="Username" id="Username">                            
                            <label for="email">用户名</label>                        
                        </div>                        
                        <div class="input">                            
                            <input :class="{hasValue : loginForm.Password}" v-model="loginForm.Password" type="text" name="Password" id="Password">                            
                            <label for="email">密码</label>                        
                        </div>                    
                    </template>                    
                    <span>忘记密码?</span>                    
                    <button type="submit" @click="submit">登录</button>                
                </div>            
            </div>        
        </div>    
    </div>
</body>
</html>

JavaScript代码

<script>    
var vue = new Vue({        
    el: '#app',        
    data: {            
        active :'login',            
        registerForm:{                
            email : '',               
             Username : '',                
             Password : '',                
             repeat : ''            
            },            
            loginForm :{                
                Username : '',                
                Password : ''            
            }        
        },        
        methods: {            
            go(type){                
                this.active = type;            
            },            
            submit(){                
                if(type === 'login'){                    
                    console.log('login',this.loginForm)                
                }                
                if(type === 'register'){                    
                    console.log('register',this.registerForm)                
                }            
            }       
         }    
        })
        </script>

Css代码

@font-face{    
    font-family: miaowu;    
    src: url(./方正-喵呜.TTF);
}
*{    
    margin: 0;    
    padding: 0;
}
body{    
    /* 100%的窗口高度 */    
    height: 100vh;    
    /* 弹性布局 水平 + 垂直居中 */    
    display: flex;    
    justify-content: center;    
    align-items: center;    
    /* 引入字体 */    
    font-family: miaowu;    
    /* 渐变背景 */    
    background: linear-gradient(45deg,rgb(181,154,254),rgb(245,189,253)) fixed;
}
.container{    
    /* 相对定位 */    
    position: relative;    
    width: 70rem;
}
.container img{    
    width: 70rem;
}
.switch span{    
    color: #ccc;    
    font-size: 1.4rem;    
    /* 鼠标放上变小手 */    
    cursor: pointer;
}
.switch span.active{    
    color: rgb(181,154,254);
}
.panel{    
    width: 30%;    
    margin: 10rem 0 0;    
    position: absolute;    
    right: 0;    
    top: 0;    
    display: flex;    
    justify-content: center;
}
.form{    
    width: 12rem;    
    margin: 3rem 0 0;
}
.form .input{    
    position: relative;    
    opacity: 1;    
    height: 2rem;    
    width: 100%;    
    margin: 2rem 0;    
    transition: 0.4s;
}
.form input{    
    outline: none;    
    width: 100%;    
    border: none;    
    border-bottom: .1rem solid rgb(181,154,254);    
    position: relative;    
    line-height: 35px;    
    background-color: transparent;    
    z-index: 1;
}
.form label{    
    position: absolute;    
    left: 0;    
    top: 20%;    
    font-size: 1.2rem;    
    color: rgb(129,101,207);    
    transition: 0.3s;
}
.hasValue ~ label,input:focus ~ label{    
    top: -50%;    
    font-size: 0.9rem;
}
.form span{    
    display: block;    
    color: rgb(110,89,167);    
    font-size: 0.8rem;    
    cursor: pointer;
}
.form button{    
    border: none;    
    outline: none;    
    margin: 2.5rem 0 0;    
    width: 100%;    
    height: 3rem;    
    border-radius: 3rem;   
    background:linear-gradient(45deg,rgb(181,154,254),rgb(245,189,253)) ;    
    box-shadow: 0 0 8px rgb(181,154,254);    
    cursor: pointer;    
    color: white;    
    font-family: miaowu;}
#live2dcanvas{    
    border: 0 !important;
}