可算把淘宝web版本的登录注册页面 1:1的复制过来了,效果图如下
1.账号密码登录
2.短信验证码登录
3.账号注册
废话不多说,直接开分享源码。
本次源码仅有html和css,js写在html文件里面,请自行修改,F12控制台可以看到每个功能按钮对应的函数
login.html(同时包含注册和登录模块,别问我为什么,怎么实现的,就是这么骚)
<!DOCTYPE html>
<html lang="en">
<head>
<title>登录</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css"/>
<link rel="stylesheet" href="../style/css/login.css"/>
</head>
<body>
<!--登录模块-->
<div class="layui-fluid loginpart">
<div class="layui-row">
<div class="login-icon">
<img src="../img/login.PNG" style="width: 80px;height: 80px;" alt="">
</div>
</div>
<div class="layui-row">
<div class="login-part">
<!-- 账号密码登录-->
<form id="login-form-usernamepwd" class="login-form login-form-usernamepwd" style="display: block">
<div class="input-loginid">
<input type="text" placeholder="请输入手机号" id="login-form-id" class="login-input">
</div>
<div class="input-loginid">
<input type="password" placeholder="请输入密码" id="login-form-pwd" class="login-input">
</div>
<p>