响应式的账号登录界面模板完整代码，内置form表单和js控件
响应式的账号登录界面模板，内置form表单和js控件
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="styleSheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账号登录</title>
<style>
*{
margin: 0;
padding: 0;
} html,
body {
height: 100%;
} @font-face {
font-family: 'neo';
src: url("font/NEOTERICc.ttf");
}
input:focus{
outline: none;
}
.form input{
width: 300px;
height: 30px;
font-size: 18px;
background: none;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
margin-bottom: 20px;
}
.form input::placeholder{
color: rgba(255,255,255,0.8);
font-size: 18px;
font-family: "neo";
}
.confirm{
height: 0;
overflow: hidden;
transition: .25s;
}
.btn{
width:140px;
height: 40px;
border: 1px solid #fff;
background: none;
font-size:20px;
color: #fff;
cursor: pointer;
margin-top: 25px;
font-family: "neo";
transition: .25s;
}
.btn:hover{
background: rgba(255,255,255,.25);
}
#login_wrap{
width: 980px;
min-height: 500px;
border-radius: 10px;
font-family: "neo";
overflow: hidden;
box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25);
position: fixed;
top: 50%;
right: 50%;
margin-top: -250px;
margin-right: -490px;
}
#login{
width: 50%;
height: 100%;
min-height: 500px;
background: linear-gradient(45deg, #9a444e, #e06267);
position: relative;
float: right;
}
#login #status{
width: 90px;
height: 35px;
margin: 40px auto;
color: #fff;
font-size: 30px;
font-weight: 600;
position: relative;
overflow: hidden;
}
#login #status i{
font-style: normal;
position: absolute;
transition: .5s
}
#login span{
text-align: center;
position: absolute;
left: 50%;
margin-left: -150px;
top: 52%;
margin-top: -140px;
}
#login span a{
text-decoration: none;
color: #fff;
display: block;
margin-top: 80px;
font-size: 18px;
}
#bg{
background: linear-gradient(45deg, #211136, #bf5853);
height: 100%;
}
/*绘图*/
#login_img{
width: 50%;
min-height: 500px;
background: linear-gradient(45deg, #221334, #6c3049);
float: left;
position: relative;
}
#login_img span{
position: absolute;
display: block;
}
#login_img .circle{
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(45deg, #df5555, #ef907a);
top: 70px;
left: 50%;
margin-left: -100px;
overflow: hidden;
}
#login_img .circle span{
width: 150px;
height: 40px;
border-radius: 50px;
position: absolute;
}
#login_img .circle span:nth-child(1){
top: 30px;
left: -38px;
background: #c55c59;
}
#login_img .circle span:nth-child(2){
bottom: 20px;
right: -35px;
background: #934555;
}
#login_img .star span{
background: radial-gradient(#fff 10%,#fff 20%,rgba(72, 34, 64, 0));
border-radius: 50%;
box-shadow: 0 0 7px #fff;
}
#login_img .star span:nth-child(1){
width: 15px;
height: 15px;
top: 50px;
left: 30px;
}
#login_img .star span:nth-child(2){
width: 10px;
height: 10px;
left: 360px;
top: 80px;
}
#login_img .star span:nth-child(3){
width: 5px;
height: 5px;
top: 400px;
left: 80px;
}
#login_img .star span:nth-child(4){
width: 8px;
height: 8px;
top: 240px;
left: 60px;
}
#login_img .star span:nth-child(5){
width: 4px;
height: 4px;
top: 20px;
left: 200px;
}
#login_img .star span:nth-child(6){
width: 4px;
height: 4px;
top: 460px;
left: 410px;
}
#login_img .star span:nth-child(7){
width: 6px;
height: 6px;
top: 250px;
left: 350px;
}
#login_img .fly_star span{
width: 90px;
height: 3px;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
background: linear-gradient(to right, rgba(255, 255, 255, 0.67), rgba(255,255,255,0));
transform: rotate(-45deg);
}
#login_img .fly_star span:nth-child(1){
top:60px;
left: 80px;
}
#login_img .fly_star span:nth-child(2){
top: 210px;
left: 332px;
opacity: 0.6;
}
#login_img p{
text-align: center;
color: #af4b55;
font-weight: 600;
margin-top: 365px;
font-size: 25px;
}
#login_img p i{
font-style: normal;
margin-right: 45px;
}
#login_img p i:nth-last-child(1){
margin-right: 0;
}
/*提示*/
#hint{
width: 100%;
line-height: 70px;
background: linear-gradient(-90deg, #9b494d, #bf5853);
text-align: center;
font-size: 25px;
color: #fff;
box-shadow: 0 0 20px #733544;
display: none;
opacity: 0;
transition: .5s;
position: absolute;
top: 0;
z-index: 999;
}
/* 响应式 */
@media screen and (max-width:1000px ) {
#login_img{
display: none;
}
#login_wrap{
width: 490px;
margin-right: -245px;
}
#login{
width: 100%; }
}
@media screen and (max-width:560px ) {
#login_wrap{
width: 330px;
margin-right: -165px;
}
#login span{
margin-left: -125px;
}
.form input{
width: 250px;
}
.btn{
width: 113px;
}
}
@media screen and (max-width:345px ) {
#login_wrap {
width: 290px;
margin-right: -145px;
}
}
label.error{
color: red;
}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages_zh.js" type="text/javascript" charset="utf-8"></script>
</head> <body>
<div id="bg">
<div id="hint"><!-- 提示框 -->
<p>登录失败</p>
</div>
<div id="login_wrap">
<div id="login"><!-- 登录注册切换动画 -->
<div id="status">
<i style="top: 0">Log</i>
<i style="top: 35px">Sign</i>
<i style="right: 5px">in</i>
</div>
<span>
<form action="#" id="formChick">
<p class="form"><label for="txt_cname">
<input type="text" name="user" id="user" paceholder="username"></label></p>
<p class="form"><input type="password" name="passwd" id="passwd" placeholder="password"></p>
<p class="form confirm"><input type="password" id="confirm-passwd" placeholder="confirm password"></p>
<input type="button" value="Log in" class="btn" onclick="login()" style="margin-right: 20px;">
<input type="button" value="Sign in" class="btn" onclick="signin()" id="btn">
</form>
<a href="#">Forget your password?</a>
</span>
</div> <div id="login_img"><!-- 图片绘制框 -->
<span class="circle">
<span></span>
<span></span>
</span>
<span class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="fly_star">
<span></span>
<span></span>
</span>
<p id="title"><i>C</i><i>L</i><i>O</i><i>U</i><i>D</i></p>
</div>
</div>
</div> <script>
var onoff = true//根据此布尔值判断当前为注册状态还是登录状态
var confirm = document.getElementsByClassName("confirm")[0] //自动居中title
var name_c = document.getElementById("title")
name = name_c.innerHTML.split("")
name_c.innerHTML = ""
for (i = 0; i < name.length; i++)
if (name[i] != ",")
name_c.innerHTML += "<i>" + name[i] + "</i>"
//引用hint()在最上方弹出提示
function hint() {
let hit = document.getElementById("hint")
hit.style.display = "block"
setTimeout("hit.style.opacity = 1", 0)
setTimeout("hit.style.opacity = 0", 2000)
setTimeout('hit.style.display = "none"', 3000)
}
//注册按钮
function signin() {
let status = document.getElementById("status").getElementsByTagName("i")
let hit = document.getElementById("hint").getElementsByTagName("p")[0]
if (onoff) {
confirm.style.height = 51 + "px"
status[0].style.top = 35 + "px"
status[1].style.top = 0
onoff = !onoff
} else {
if (!/^[A-Za-z0-9]+$/.test(user.value))
hit.innerHTML = "账号只能为英文和数字"
else if (user.value.length < 6)
hit.innerHTML = "账号长度必须大于6位"
else if (passwd.value.length < 6)
hit.innerHTML = "密码长度必须大于6位"
else if (passwd.value != con_pass.value)
hit.innerHTML = "两次密码不相等"
else if (passwd.value = con_pass.value) {
submit(function(res) {
if (res == "exist")
hit.innerHTML = "该账号已存在"
else if (res == true) {
hit.innerHTML = "账号注册成功，两秒后自动刷新页面"
setTimeout("window.location.reload()", 2000)
} else if (res == false)
hit.innerHTML = "账号注册失败"
})
}
hint()
}
} //登录按钮
function login() {
if (onoff) {
let request = new XMLHttpRequest()
let url = ""
request.open("post", url, true)
let data = new FormData()
data.append("user", user.value)
data.append("passwd", passwd.value)
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.responseText == false)
hint()
else
window.location.href = this.responseText;
}
}
request.send(data)
} else {
let status = document.getElementById("status").getElementsByTagName("i")
confirm.style.height = 0
status[0].style.top = 0
status[1].style.top = 35 + "px"
onoff = !onoff
}
} </script> </body></html>
响应式的账号登录界面模板完整代码，内置form表单和js控件的更多相关文章
- 50个令人惊奇的jQuery插件（对话框和表单篇）及免费的响应式bootstrap管理员后台界面主题 - Charisma
http://www.woiweb.net/50-amazing-jquery-plugins.html 多文件文件下载 免费的响应式bootstrap管理员后台界面主题 – Charisma htt ...
- 10个漂亮的响应式的食品 WordPress 美食模板
您是否拥有一个餐厅,酒吧,咖啡馆,小酒馆,比萨饼店?如果答案是肯定的,请确保您在网上也提供服务.为了使您的工作更轻松,我们选择了一些新的和独特的餐厅主题,覆盖了范围很广的食品企业.这些主题提供了很多很 ...
- ASP .NET登录界面用户验证码代码
//ASP .NET用户登录界面经常用到验证码代码如下 private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码 ...
- Django（5） session登录注销、csrf及中间件自定义、django Form表单验证（非常好用）
一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie 1.数据库Session 1 2 3 4 5 ...
- 模板：DOM常用场景【表单提交】——javascript结合HTML DOM（或者JQuery）运用
一.删除行为前的提示 首先要有一个onclick的DOM(点击)事件,和一个JavaScript弹出框:confirm()确认框 <script> function del(){ var ...
- 6.4-6.5 使用form表单验证，完善登录页面
之前是使用自定义的类来实现登录逻辑,现在使用django内置的form表单验证,用继承django的view来实现登录页面. users > views.py 的内容是: from django ...
- Django 构建模板form表单的两种方法
通常情况下,我们想构建一张表单时会在模板文件login.html中写入 <form action="/your-name/" method="post"& ...
- JsonResponse类的使用、form表单上传文件补充、CBV和FBV、HTML的模板语法之传值与过滤器
昨日内容回顾 Django请求生命周期 # 1.浏览器发起请求 到达Django的socket服务端(web服务网关接口) 01 wsgiref 02 uwsgi + nginx 03 WSGI协议 ...
- jquery自己主动旋转的登录界面的背景代码登录页背景图
在其他网站上看到比较爽Web登录界面.背景图片可以自己主动旋转. 介绍给大家.有兴趣的可以改改下来作为自己的系统登录界面. 如图: watermark/2/text/aHR0cDovL2Jsb2cuY ...
随机推荐
- 【IP代理】国内省市域名代理
最近遇到一个测试问题,就是投放时需要按地域投放,所以需要对指定的IP地址范围内的地方投放才有效. 所以,就调查了下IP代理的方式,一个是SSR,这个好像只能代理国外的域名方式,另外一个就是百度搜索IP ...
- 20165205 2017-2018-2 《Java程序设计》第九周学习总结
20165205 2017-2018-2 <Java程序设计>第九周学习总结 教材学习内容总结 掌握URL类的使用方法 URL类的构造方法: public URL(String spec) ...
- 关于windows中在env中执行django-admin.py出现Access is denied.的解决办法
(ll_env) E:\python\learning_log>django-admin.pyAccess is denied. 这个是路径的问题,默认的文件获取路径没能正常获取文件 我使用绝对 ...
- 练手mysqlbinlog日志恢复数据（centos6.5 64,mysql5.1）
练手mysql bin log日志相关 系统是centos 6.5 64 阿里云的服务器 mysql版本5.1 1 如何开启bin-log日志? vi /etc/my.cnf [mysqld] log ...
- 利用java反射排查一次线上问题(确定问题及问题定位)
背景 hive 用的 1.1.0版本(其实这个版本bug挺多,包括执行计划串列的等等问题吧,建议大家如果选1.x版本用1.2.2吧),一下提到的代码部分如无特殊说明都是hive-1.1.0版本. 前段 ...
- Termux 详细安装
termnux安装方法 https://blog.csdn.net/u010475354/article/details/79675893 使用Termux把Android手机变成SSH服务器 htt ...
- java 构造json对象数组
利用for构造 import com.google.gson.JsonArray; import com.google.gson.JsonObject; public class Test { pub ...
- Set原理
一.HashSet判断重读值的原理 1. 哈希表的存储结构: ==>数组+链表,数组的每个元素以链表的形式存储 2.如何把对象存储到哈希表中 ==>先计算对象的hashcod值,再对数组的 ...
- centos下查看python的安装目录
直接用python命令,打印sys的path即可: >>> import sys >>> print(sys.path) ['', '/usr/local/lib/ ...
- groovy 从jsonList中读取某个字段
今天又被groovy的高效吓到了. 想提取所有的itemCodes,两种玩法 一.常规方法:遍历组装 RestResult items = getListPager() def temp = [] i ...