h5 淘宝web登录注册1:1还原响应式页面源码

可算把淘宝web版本的登录注册页面 1:1的复制过来了，效果图如下

1.账号密码登录

2.短信验证码登录

3.账号注册

废话不多说，直接开分享源码。
本次源码仅有html和css，js写在html文件里面，请自行修改，F12控制台可以看到每个功能按钮对应的函数

<!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><a href="javascript:void(0)" onclick="smscodelogin()"><span style="float: left;">短信验证码登录</span></a><a href="javascript:void(0)" onclick="freeregister()"><span style="float:right;">免费注册</span></a></p><div class="login-btn"><button type="submit" tabindex="3" onclick="loginbyusernamepwd()" class="fm-button fm-submit password-login">登录</button></div></form><!--            短信验证登录--><form id="login-form-phone" class="login-form login-form-phone" style="display: none"><div class="input-loginid"><input type="text" placeholder="请输入手机号" id="login-form-phoneNumber" class="login-input"></div><div class="input-loginid"><input type="password" placeholder="请输入短信验证码" id="login-form-smscode" class="login-input"><a href="javascript:void(0)" onclick="getsmscode()">获取验证码</a></div><p><a href="javascript:void(0)" onclick="freeregister()"><span style="float: left;">免费注册</span></a></p><div class="login-btn"><button type="submit" tabindex="3" onclick="loginbycode()" class="fm-button fm-submit password-login">登录</button></div><div class="login-btn"><button type="submit" tabindex="3" onclick="usernamepwdlogin()" class="fm-button-toup fm-submit password-login">账号密码登录</button></div></form></div></div>
</div><!--注册模块-->
<div class="layui-fluid registerpart" style="display: none"><div style="width: 80%;margin: 0 auto;"><div class="layui-row"><div class="register"><div class="title">手机号注册</div><div class="sub-title">亲,欢迎注册账号</div></div></div><div class="layui-row"><div class="login-part"><form id="register-form-phone" class="login-form register-form-phone"><div class="input-loginid"><input type="text" placeholder="请输入手机号" id="register-form-phoneNumber" class="login-input"></div><div class="input-loginid" style="width: 100%;"><div class="am-input-control" style="float: left;width: 60%;"><input type="password" style="width: 100%" placeholder="请输入效验码" id="register-form-smscode" class="login-input"></div><div class="am-input-extra"><a href="javascript:void(0)" onclick="getregistersmscode()">获取验证码</a></div></div><div class="login-btn"><button type="submit" tabindex="3" onclick="register()" class="fm-button fm-submit password-login">同意并注册</button></div></form></div></div></div>
</div><script src="../layui/layui.js" charset="utf-8"></script>
<!--下面这个commonjs.js你用不到删除即可-->
<!--<script src="../style/js/commonjs.js" charset="utf-8"></script>--><script>//一般直接写在一个js文件中layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;});var $;window.onload=function (){$=layui.jquery;}function freeregister(){console.log("开始免费注册");$('.loginpart').css('display','none');$('.registerpart').css('display','block');}function smscodelogin(){//更改样式的精髓$('.login-form-usernamepwd').css('display','none');$('.login-form-phone').css('display','block');}function usernamepwdlogin(){$('.login-form-usernamepwd').css('display','block');$('.login-form-phone').css('display','none');}function loginbyusernamepwd(){console.log("根据账号密码登录");}function loginbycode(){console.log("根据短信验证码登录")}function getsmscode(){console.log("获取登录模块的短信验证码")}function getregistersmscode(){console.log("获取注册模块的验证码")}function register(){console.log("注册成功，跳转至登录界面")$('.registerpart').css('display','none');$('.loginpart').css('display','block');}
</script>
</body>
</html>

关于这里的登录注册同一页的实现方法，如果给你点提示你可能就明白了：jq的修改css功能，display 从none到block

.layui-row .login-icon{text-align: center;margin-top: 40px;
}.login-part{text-align: center;
}.login-part .login-form .input-loginid{margin-top: 40px;padding-bottom: 10px;border-bottom: 1px solid #ff5000;
}.login-part .login-form p{width: 96%;/*padding-left: 5px;*/margin-left: 8px;margin-top: 10px;
}.login-part .login-form .input-loginid .login-input{font-size: 16px;padding-left: 15px;color: #111;/*color: #000;*//*font-size: 17px;*/-webkit-appearance: none;-moz-appearance: none;appearance: none;width: 100%;/*padding: 2px 0;*/border: 0;background-color: transparent;line-height: 1;-webkit-box-sizing: border-box;box-sizing: border-box;
}.fm-button{background: -webkit-linear-gradient(left,#ff9000,#ff5000) no-repeat;color: #fff;box-shadow: 0 2px 4px #f7c7b1;height: 45px;border-radius: 35px;margin-top: 25px;font-size: 16px;border: none;width: 90%;/*margin-top: 20px;*/
}.fm-button-toup{color: #ff5000;background: white;border: 1px solid #ff5000;height: 45px;border-radius: 35px;margin-top: 25px;font-size: 16px;/*border: none;*/width: 90%;
}.layui-row .login-part .login-form-phone .input-loginid a{position: absolute;right: 10px;margin-right: 24px;color: #ff5000;
}.registerpart .layui-row .login-part .register-form-phone .input-loginid div a{/*!*position: absolute;*!*//*float: right;*//*display: inline-block;*//*!*padding-bottom: 10px;*!*//*!*right: 38px;*!*//*margin-right: 3%;*//*color: #ff5000;*/height: 30px;line-height: 30px;border: none;display: inline-block;text-align: center;font-size: 16px;color: #ff5000;
}.am-input-control{font-size: 17px;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;display: inline;
}.am-input-extra{display: inline;-webkit-box-flex: initial;-ms-flex: initial;flex: initial;min-width: 0;max-height: 21px;overflow: hidden;padding-right: 0;line-height: 1;color: #888;font-size: 15px;margin-left: 5px;
}.registerpart .layui-row .login-part .register-form-phone .input-loginid{border-bottom: 2px solid rgb(247,247,247);
}/*注册模块*/
.layui-row .register .title{margin-top: 20px;font-size: 30px;color: #333;
}.layui-row .register .sub-title{margin-top: 12px;font-size: 16px;color: #999;
}.registerpart .layui-row .register{margin-top: 40px;
}

看到这里不点个赞？

下期源码预告

1.商城web首页
包含功能：轮播图/顶部导航栏/底部猜你喜欢

2.商品详情页
包含功能：商品详细展示 /底部弹出框提示，提示商品详细参数。

点赞破200或者评论破100，提前放出商城web源码（包含后端源码哦）

h5 淘宝web登录注册1:1还原响应式页面源码相关推荐

vue 实现 web端滚动刷新排序筛选响应式布局 (源码)
vue 实现 web端滚动刷新排序筛选响应式布局先展示效果图源码: <template><div> <div class=&qu ...
使用nodejs、express以及MySQL制作一个简单类淘宝的登录注册页面
项目搭建参考自原文地址:https://jimmyhjh.com/nodejs-express-MySQL-4177adf369dc46d7983138b891d582c9 一.通过MySQL建立数 ...
day 14 作业模拟手机淘宝-----（登录注册--购买商品---结算）
整体案例打包了,有兴趣下载看看链接:https://pan.baidu.com/s/1pM6PcKoAQ2LaXiMc79_9RQ 提取码:usuq 复制这段内容后打开百度网盘手机App,操作更方 ...
短信验证登录淘宝web页面（selenium+Chromedriver）
短信验证登录淘宝web页面自动化模拟登录(chromedriver存在python环境里) 第一步进行导包第二步定位获取页面的web源代码第三步构造是以chrome浏览器登录而不是以seleni ...
淘宝授权登录对接文档
对接淘宝授权登录官方对接文档:https://open.m.taobao.com/doc.htm?spm=a219a.7386653.0.0.c549669anDR2sm#?treeId=420&a ...
iOS淘宝授权登录及跳转淘宝页面
作者公司是做淘客的,本文会介绍淘宝授权登录的介入流程,淘客返现等逻辑想要了解的可以看作者的其他文章,或者是私聊作者,qq号见个人资料. 1.注册APP 淘宝授权登录的SDK是阿里百川的不是淘宝的,有些 ...
2023 年大淘宝 Web 端技术概览
本文介绍了大淘宝 Web 领域的工程师们正在做哪些技术工作.有什么技术产品. 背景 2022 年,大淘宝前端团队进行了调整:重新组织生产关系,按业务线拆分整合进对应的业务技术团队,同时保留了大前端虚线 ...
使用Idea做一个淘宝的登录页面和手机页面
一.使用Idea做一个淘宝的登录页面代码如下 <!DOCTYPE html> <html lang="en"> <head><meta ...
淘宝客 SDK，一键导入淘宝客商城，快速实现流量变现。支持淘宝授权登录、免登录；一键接入各种商城模块；一键配置淘宝客推广位，赚取收益
TaokeSdk 项目地址:houhoudev/TaokeSdk 简介: 淘宝客 SDK,一键导入淘宝客商城,快速实现流量变现.支持淘宝授权登录.免登录:一键接入各种商城模块 : 一键配置淘宝客推广 ...

h5 淘宝web登录注册1:1还原响应式页面源码

h5 淘宝web登录注册1:1还原响应式页面源码相关推荐

最新文章

热门文章