HTML+CSS+JavaScript网页登录界面制作（附源代码）
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;
}