一、效果演示
[注]: 这里需要我们创建三个文件,一个是index.html文件,一个是style.css文件还有一个是login.js文件,把代码copy上去 只要路径找好就能正常运行了。
演示地址:演示链接
二、代码实现
2.1、HTML主页面
<!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" href="style.css">
</head>
<body>
<!-- 整体布局 -->
<div class="container right-panel-active">
<!-- 注册框 -->
<div class="container_from container_signup">
<form action="#" class="from" id="from1">
<h2 class="form_title">注册账号</h2>
<input type="tel" placeholder="Telephone" class="input" pattern="^1[0-9]{10}$">
<input type="text" placeholder="Username" class="input">
<input type="password" placeholder="Password" class="input">
<button class="btn">点击注册</button>
</form>
</div>
<!-- 登录框 -->
<div class