百度注册登录页面简单实现—

百度注册页面——简单实现(仿)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>注册</title><!--<link rel="stylesheet" href="css/register.css" />--><style>header,section,article,figure{display: block;
}
*,html,body{padding: 0;margin: 0;
}
body,p,ul,li,span,i,strong,input,textarea{font-size: 14px;font-family: "微软雅黑";font-style: normal;padding: 0;margin: 0;
}
h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 14px;
}
a{text-decoration: none;color: #000;
}
ul,li{list-style: none;padding: 0;margin: 0;
}
section{width:400px;height:500px;background: white;margin-left:530px;margin-top:100px;box-shadow: 0 0 20px 5px dimgrey;
}
header{width: 400px;height: 50px;float: left;
}
header img{margin-left: 20px;margin-top: 20px;float: left;
}
.dot{float: left;margin-top:20px;margin-left: 5px;font-size:24px;font-family: "微软雅黑";
}
.smdl{float:left;font-family: "微软雅黑";font-size: 16px;margin-left:10px;margin-top:33px;
}
article{float: left;width: 400px;height:270px;margin-top:20px;
}
#ts{width:300px;height: 30px;border: 0px;margin-top:5px;margin-left: 20px;
}
#yhm{font-family: "微软雅黑";font-size: 14px;float: left;margin-right:10px;margin-left:19px;margin-top: 28px;color:dimgrey;
}
#yhmk{width:305px;height:35px;float: left;margin-top:20px;border: #D3D3D3 solid 1px;padding-left: 10px;
}
#sjh{font-family: "微软雅黑";font-size: 14px;float: left;margin-right:10px;margin-left:19px;margin-top:38px;color:dimgrey;
}
#sjhk{width:305px;height:35px;float: left;margin-top:29px;border: #D3D3D3 solid 1px;padding-left: 10px;
}
#mima{font-family: "微软雅黑";font-size: 14px;float: left;margin-right:9.5px;margin-left:19px;margin-top: 38px;color:dimgrey;
}
#mimak{width:305px;height:35px;float: left;margin-top:29px;border: #D3D3D3 solid 1px;padding-left: 10px;
}
#yzm{font-family: "微软雅黑";font-size: 14px;float: left;margin-right:10px;margin-left:19px;margin-top:38px;color:dimgrey;
}
#yzmk{width:170px;height:35px;float: left;margin-top:29px;border: #D3D3D3 solid 1px;padding-left: 10px;
}
#btn{width: 125px;height: 35px;margin-left: 10px;/*float: left;*/margin-top:29px ;border: #D3D3D3 solid 1px;color:grey;font-family: "微软雅黑";font-size: 12px;background:whitesmoke;
}
#check{float: left;;width: 13px;height: 13px;margin-top:33px;margin-left:70px;
}
.yd{margin-top:30px;float: left;font-family: "微软雅黑";font-size: 11px;margin-left: 5px;color: darkgray;
}
.xy{color: #1E90FF;
}
.sm{color: #1E90FF;
}
#zc{width:315px;height: 40px;background:#4490f7;color: white;font-family: "微软雅黑";font-size: 16px;border: 0px;margin-left:70px;margin-top:20px;
}</style></head><body><section><header><img src="img/2.png" /><p class="dot">.</p><p class="smdl">扫码登录</p>             </header><article><div id="ts"></div><p id="yhm">用户名</p><input type="text" placeholder="请设置用户名" id="yhmk" pattern="/^[a-zA-Z0-9_]\w{3,15}$/" onchange="username()"/><p id="sjh">手机号</p><input type="text" placeholder="可用于登录和找回密码" id="sjhk" pattern="/^1[3|4|5|7|8][0-9]{9}$/" onchange="phone()"/><p id="mima">&nbsp;&nbsp;&nbsp;&nbsp;密码</p><input type="password" placeholder="请设置登录密码" id="mimak" pattern="/^.{6,}$/" onchange="Password()"/>   <p id="yzm">验证码</p><input type="text" placeholder="请输入验证码" id="yzmk" /><input type="button" value="获取短信验证码" id="btn"/><script></script></article><input type="checkbox" id="check" /><p class="yd">阅读并接受《<a href="#" class="xy"/>百度用户协议</a>》及《<a href="#" class="sm"/>百度隐私权保护声明</a>》</p><a href="空白页面.html"><input type="button" value="注册" id="zc"/></a></section><script>function username(){var user = document.getElementById('yhmk').value;var re = /^[a-zA-z]\w{3,15}$/;if(!re.test(user)){document.getElementById("ts").innerHTML = "<font color='red'>提示：用户名有误请重新输入</font>";}}function phone(){var tel = document.getElementById("sjhk").value;var re = /^1\d{10}$/;if(!re.test(tel)){document.getElementById("ts").innerHTML = "<font color='red'>提示：输入的手机号有误</font>"}}function Password(){var pass = document.getElementById("mimak").value;var re = /^[a-zA-z0-9]\w{5,}$/;if(!re.test(pass)){document.getElementById("ts").innerHTML = "<font color='red'>提示：密码至少6位</font>"}}</script></body>
</html>

百度登录页面——简单实现（仿）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>登录</title><!--<link rel="stylesheet" href="css/login.css" />--><style>header,section,article,figure{display: block;
}
*,html,body{padding: 0;margin: 0;
}
body,p,ul,li,span,i,strong,input,textarea{font-size: 14px;font-family: "微软雅黑";font-style: normal;padding: 0;margin: 0;
}
h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 14px;
}
a{text-decoration: none;color: #000;
}
ul,li{list-style: none;padding: 0;margin: 0;
}
body{/*position: fixed;*/background:lightgrey;
}
section{width:400px;height:480px;background: white;margin-left:530px;margin-top:100px;box-shadow: 0 0 20px 5px dimgrey;
}
header img{margin-left: 20px;margin-top: 20px;float: left;
}
.dot{float: left;margin-top:20px;margin-left: 5px;font-size:24px;font-family: "微软雅黑";
}
.smdl{float:left;font-family: "微软雅黑";font-size: 16px;margin-left:10px;margin-top:33px;
}
article{margin-top: 10px;float: left;width:400px;height: 335px;}
article img{padding: 5px;border: darkgrey solid 1px;margin-top:50px;margin-left: 120px;
}
.app{font-family: "微软雅黑";font-size: 16px;margin-left:107px;margin-top: 10px;
}
.app a{color: dodgerblue;
}
div{width: 300px;height:50px;margin-left: 50px;margin-top: 20px;}
.aq{float: left;margin-left:10px;margin-top: 3px;border: 0px;
}
#aq{margin-top:8px;color: darkgrey;margin-left:3px;float: left;
}
.gx{float: left;margin-left:50px;margin-top: 0px;border: 0px;
}
#gx{margin-top:8px;color: darkgrey;margin-left:3px;float: left;
}
.bj{float: left;margin-left:50px;margin-top: 3px;border: 0px;
}
#bj{margin-top:8px;color: darkgrey;margin-left:3px;float: left;
}
footer{float: left;background: #f0f6ff;width: 400px;height:80px;
}
.yhmdl{font-size:14px;font-family: "微软雅黑";color: dodgerblue;margin-top: 30px;margin-left:30px;margin-right: 10px;float: left;
}
.line{color:#1E90FF;font-size:8px;font-family: "微软雅黑";float:left;margin-top:33px;
}
footer img{float: left;margin-top:28px;margin-left: 10px;
}
.ljzc{float: right;font-family: "微软雅黑";font-size: 14px;color: #1E90FF;margin-right: 30px;margin-top: 30px;
}</style></head><body><section><header><img src="img/2.png" /><p class="dot">.</p><p class="smdl">扫码登录</p></header><article><img src="img/1.png" /><p class="app">请使用<a href="#">百度App</a>扫码登录</p><div><img src="img/6.png" class="aq"/><p id="aq">安全</p><img src="img/3.png" class="gx"/><p id="gx">高效</p><img src="img/5.png" class="bj"/><p id="bj">便捷</p></div></article><footer><a href="#" class="yhmdl">用户名登录</a><p class="line"><b>|</b></p><img src="img/4.png" /><a href="register.html" class="ljzc">立即注册</a></footer></section></body>
</html>

百度注册登录页面简单实现——仿照相关推荐

SpringSecurity+Mybatis实现用户自助注册登录(含角色)，打造简单安全的注册登录页面。
#项目架构.功能点架构: Springboot2.5.+ MySQL数据库8.0+(记录用户信息.角色清单.用户角色对照表) 持久层Mybatis 用户注册页面RegisterPage采用Thyme ...
原生js验证简洁美观注册登录页面
本文转载自: https://www.cnblogs.com/storm-chou/p/6189489.html 作者:storm-chou 转载请注明该声明. 序一个以js验证表单的简洁的注册登录 ...
用vue+element-ui快速写一个注册登录页面
vue+element-ui可以快速开发一个页面,免除大部分的css代码. 一.用表单来做: 1.代码:  <template><div ...
Android注册登录页面
Android注册登录页面需求分析项目目录 .java domain JsonBean.java UserInfo.java utils GetJsonDataUtil.java Login.j ...
设计灵感|APP注册登录页面的设计形式
注册登录页面是一个APP的门面,它的好坏与否直接影响着APP的用户数和用户体验. 作为一个设计师,其实经常时不时就会去下载一些APP,体验的时候经常被一些不尽人意的注册登录页面弄的想怒摔手机,最终都 ...
用HTML做一个简单的web登录页面,简单的JavaWeb注册登录案例
简单的JavaWeb注册登录案例 1.注册页面register.html register 姓名: 电话: 邮箱: qq: 2.注册案例实现程序register.java /** * 注册案例实现程序 ...
使用原生js写一个简单的注册登录页面
目录 1.注册页面 2.登录页面 1.首先是我们的注册页面这是我们的html骨架 <!DOCTYPE html> <html lang="en">< ...
用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
注册登录页面代码用js判断是否填入信息_php实现登录功能
原文:https://blog.csdn.net/ccy1995414/article/details/80638685 自然是从最简单的功能起步,我第一个任务选择了做一个登录操作,其实也没想象中那么 ...

百度注册登录页面简单实现——仿照

百度注册登录页面简单实现——仿照相关推荐

最新文章

热门文章