精华内容
下载资源
问答
  • bootstrap创建登录注册页面

    万次阅读 多人点赞 2015-12-15 18:13:16
    用bootstrap做登入注册页面,使用validate做表单验证 技术:bootstrap,font-awesome,jquery-validate; 特点:响应式布局,表单验证(用户两次密码是否相同,必填信息是否填写)背景图片自适应屏幕大小; 宗旨:从...
    扫码关注领编程教学资料

     

    用bootstrap做登入注册页面,使用validate做表单验证

    技术:bootstrap,font-awesome,jquery-validate;

    特点:响应式布局,表单验证(用户两次密码是否相同,必填信息是否填写)背景图片自适应屏幕大小;

    宗旨:从实战中学知识。

     

    个人主页:http://www.itit123.cn/ 更多干货等你来拿 (微信小程序入门教程:入门教程系列 ,提供免费的api接口,无需考虑服务端代码问题)。

    验证码实现功能 ITDragon博客

     

    效果图:

     

    html代码:

    第三方资源的导入是用cdn引入;当然也可以自己去下载在本地导入。

     

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>bootstrap案例</title>
    		<!--用百度的静态资源库的cdn安装bootstrap环境-->
    		<!-- Bootstrap 核心 CSS 文件 -->
    		<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    		<!--font-awesome 核心我CSS 文件-->
    		<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    		<!-- 在bootstrap.min.js 之前引入 -->
    		<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    		<!-- Bootstrap 核心 JavaScript 文件 -->
    		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    		<!--jquery.validate-->
    		<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
    		<script type="text/javascript" src="js/message.js" ></script>
    		<style type="text/css">
    			body{background: url(img/4.jpg) no-repeat;background-size:cover;font-size: 16px;}
    			.form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}
    			#login_form{display: block;}
    			#register_form{display: none;}
    			.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
    			input[type="text"],input[type="password"]{padding-left:26px;}
    			.checkbox{padding-left:21px;}
    		</style>
    	</head>
    	<body>
    		<!--
    			基础知识:
    			网格系统:通过行和列布局
    			行必须放在container内
    			手机用col-xs-*
    			平板用col-sm-*
    			笔记本或普通台式电脑用col-md-*
    			大型设备台式电脑用col-lg-*
    			为了兼容多个设备,可以用多个col-*-*来控制;
    		-->
    	<div class="container">
    		<div class="form row">
    			<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
    				<h3 class="form-title">Login to your account</h3>
    				<div class="col-sm-9 col-md-9">
    					<div class="form-group">
    						<i class="fa fa-user fa-lg"></i>
    						<input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus" maxlength="20"/>
    					</div>
    					<div class="form-group">
    							<i class="fa fa-lock fa-lg"></i>
    							<input class="form-control required" type="password" placeholder="Password" name="password" maxlength="8"/>
    					</div>
    					<div class="form-group">
    						<label class="checkbox">
    							<input type="checkbox" name="remember" value="1"/> Remember me
    						</label>
    						<hr />
    						<a href="javascript:;" id="register_btn" class="">Create an account</a>
    					</div>
    					<div class="form-group">
    						<input type="submit" class="btn btn-success pull-right" value="Login "/>   
    					</div>
    				</div>
    			</form>
    		</div>
    
    		<div class="form row">
    			<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form">
    				<h3 class="form-title">Login to your account</h3>
    				<div class="col-sm-9 col-md-9">
    					<div class="form-group">
    						<i class="fa fa-user fa-lg"></i>
    						<input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus"/>
    					</div>
    					<div class="form-group">
    							<i class="fa fa-lock fa-lg"></i>
    							<input class="form-control required" type="password" placeholder="Password" id="register_password" name="password"/>
    					</div>
    					<div class="form-group">
    							<i class="fa fa-check fa-lg"></i>
    							<input class="form-control required" type="password" placeholder="Re-type Your Password" name="rpassword"/>
    					</div>
    					<div class="form-group">
    							<i class="fa fa-envelope fa-lg"></i>
    							<input class="form-control eamil" type="text" placeholder="Email" name="email"/>
    					</div>
    					<div class="form-group">
    						<input type="submit" class="btn btn-success pull-right" value="Sign Up "/>
    						<input type="submit" class="btn btn-info pull-left" id="back_btn" value="Back"/>
    					</div>
    				</div>
    			</form>
    		</div>
    		</div>
    	<script type="text/javascript" src="js/main.js" ></script>
    	</body>
    </html>
    

     

     

     

    js代码:

    可能有不合理的方法,毕竟笔者能力有限,如有更好的方法可以留言,我会及时修改。

     

    $().ready(function() {
    	$("#login_form").validate({
    		rules: {
    			username: "required",
    			password: {
    				required: true,
    				minlength: 5
    			},
    		},
    		messages: {
    			username: "请输入姓名",
    			password: {
    				required: "请输入密码",
    				minlength: jQuery.format("密码不能小于{0}个字 符")
    			},
    		}
    	});
    	$("#register_form").validate({
    		rules: {
    			username: "required",
    			password: {
    				required: true,
    				minlength: 5
    			},
    			rpassword: {
    				equalTo: "#register_password"
    			},
    			email: {
    				required: true,
    				email: true
    			}
    		},
    		messages: {
    			username: "请输入姓名",
    			password: {
    				required: "请输入密码",
    				minlength: jQuery.format("密码不能小于{0}个字 符")
    			},
    			rpassword: {
    				equalTo: "两次密码不一样"
    			},
    			email: {
    				required: "请输入邮箱",
    				email: "请输入有效邮箱"
    			}
    		}
    	});
    });
    $(function() {
    	$("#register_btn").click(function() {
    		$("#register_form").css("display", "block");
    		$("#login_form").css("display", "none");
    	});
    	$("#back_btn").click(function() {
    		$("#register_form").css("display", "none");
    		$("#login_form").css("display", "block");
    	});
    });

     

    资源下载地址:http://download.csdn.net/detail/qq_19558705/9358603

     

     

     

    现在我们开始谈谈所用到的知识点:

    ①bootstrap的布局:

    bootstrap用的是网格布局,使用col-*-*

    使用条件:要在.container和.row下才能使用,结构如下:

     

    <div class="container">
       <div class="row">
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>      
       </div>
       <div class="row">...</div>
    </div>

    参考值:
    col-xs-*:小于768px,手机

     

    col-sm-*:大于768px,平板

    col-md-*:大于998px,普通电脑,笔记本之类

    col-lg-*:大于1200px,一般为大型台式电脑

    可以同时使用,达到跨多个设备效果

    偏移:col-*-offset-*

     

    ②表单:

    这里的表单和普通表单没什么太多区别,我就不多说了。

     

    ③font-awesome的使用:

    使用的是4.3.0版本,使用方法

     

    <i class="fa fa-check fa-lg"></i>

    fa-lg表示大图

     

    更多icon参考:http://fontawesome.dashgame.com/
     

    ④jquery-validate表单验证:

    这是我要讲的重点,

    第一步:首先到导入jquery-validate第三方资源,

    第二步:创建好form表单,初始化validate

     

    $("#login_form").validate({
    		rules: {
    			username: "required",
    			password: {
    				required: true,
    				minlength: 5
    			},
    		},
    		messages: {
    			username: "请输入姓名",
    			password: {
    				required: "请输入密码",
    				minlength: jQuery.format("密码不能小于{0}个字 符")
    			},
    		}
    	});

    注意这里的login_form必须是form表单上的选择器,笔者因为将其设置在div上,控制台显示settings没有被定义的错误。这里的username和password都是form表单中的name值;rules是规则,message是提示的信息

     

    required:true表示该字段为必填,

    minlength表示长度至少为5,maxlength是html5支持的,所以不用在这里面设置

    equalTo表示与某某相同,后面接的是第一个值,"#id"或者是".class"

    message中对应的内容后面就是提示的文字信息。可以直接copy我的代码,然后根据自己的需要修改。

     

    ⑤背景自适应屏幕大小:

    不知道前到处找文档,知道后才发现好简单,那就是background-size:cover;这样可以做到背景图片和浏览器大小一样了。很简单吧。

     

    bootstrap创建登录注册页面github下载地址:

    https://github.com/ITDragonBlog/daydayup/blob/master/bootstrap

     

    我觉得在实战中学习比盲目学习效果好很多,知道这些知识可以做什么,解决了为什么学这些知识的问题。

    我总结,你来学,一起装逼一起飞。有什么疑问和建议可以留言,我会及时修改。转载请注明来源。

     

     

    展开全文
  • HTML&CSS实现经典登录注册页面

    万次阅读 多人点赞 2018-10-09 20:43:50
    提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。 1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即...

    提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。

    1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即注册”会跳转到第二张图片,也就是注册界面,点击注册界面的“请登录”又会跳转回到第一个登录界面。

    2、下面看一下具体的代码实现(使用的开发工具是HBuilder,有非常强大的提示功能,推荐)

    首先是登录界面,我命名为login.html(这在代码的跳转中有作用),有几个我认为比较重要的地方我直接用//来注释了,但是小伙伴复制粘贴的时候需要把注释去掉,因为HTML注释语法不是这样的:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                form
                {
                    width:100%;
                    height:700px;
                     margin-top: 0px;
                    background:#008B8B;
                }
                div
                {
                    display:inline-block;
                    padding-top: 80px;
                    padding-right: 20px;
                    
                }
                h2
                {
                    font-family: "微软雅黑";
                font-size: 40px;
                    color:black;
                }
                #log
                {
                    color:blue;
                }
            </style>
        </head>
        <body>
            <form name="login">
                <center>
                <div>
                <h2>
                        Hedy西点店欢迎您!
                </h2>
                <p>
                    用户名:<input type="text"/>
                </p>
                <p>
                    密&emsp;码:<input type="password"/>     //注意:&emsp是全角空格符,占一个中文字的长度,加上可以保证用户名                                                                                         和密码对齐,小伙伴可以试着 先不加这个运行一下看一下结果 
                </p>
                <p>
                    <input id=log type="submit" value="登录" />
                </p>
                <p>
                    还没有账号?<a href="register.html">立即注册</a>
                </p>
                </div>
                </center>
            </form>
        </body>
    </html>

    然后是注册页面,我把它命名为register.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                form
                {
                    width:100%;
                    height:700px;
                     margin-top: 0px;
                    background:#008B8B;
                }
                div
                {
                    display:inline-block;
                    padding-top: 40px;
                    padding-left: 0px;
                    
                }
                h2
                {
                    font-family: "微软雅黑";
                font-size: 40px;
                    color:black;
                }
                #reg
                {
                    color:blue;
                }
            </style>
        </head>
        <body>
            <form>
                <div>
                <h3>
                注册
            </h3>
            <p>
                    用户名:<input type="text"/>
                </p>
                <p>
                    密&emsp;码:<input type="password"/>
                </p>
                <p>
                    手机号:<input type="text"/>
                </p>
                <p>
                    <input id=reg type="submit" value="立即注册" />
                </p>
                <p>
                    已有账号?<a href="login.html">请登录</a>
                </p>    
            </form>    
                </div>
            
            
        </body>
    </html>

    3、总结:这两个页面很相似,涉及到的元素都差不多,不同的只是对页面的布局,很多地方的布局都可以进行修改得到你最满意的页面效果,也有很多元素的属性可以进一步设置,比如限制用户名和 密码的长度,加入背景图片等等,都非常简单,只要修改上面相应的一行代码即可 ,今天的分享就是这样啦~~

    展开全文
  • QQ注册页面

    千次阅读 2019-08-03 18:29:32
    利用HTML+CSS编辑QQ注册页面 最近在学html和css,老师布置任务要写个QQ注册页面,在观看这位大神的博客下,最后总算是完成了,有同学也感兴趣的话可以看下我写的内容 点击查看那位大神的博客链接 第一步,先下载个...

    利用HTML+CSS编辑QQ注册页面

    最近在学html和css,老师布置任务要写个QQ注册页面,在观看这位大神的博客下,最后总算是完成了,有同学也感兴趣的话可以看下我写的内容。
    这是那位大神的博客链接 : https://blog.csdn.net/qq_17284055/article/details/81095214

    这是我做的效果图:

    要是大家觉得代码多的话可以直接导入哈,最底下有链接可以下载源文件哈

    第一步,先下载个前端开发工具,工具的话有很多,例如Hbuilder 和VScode我用的是Hbuilder
    VScode官网下载:https://code.visualstudio.com/
    Hbuilder官网下载: http://www.dcloud.io/
    第二步,具体如何实现页面,可以把整个页面分为两个部分(left_div)和(right_div),再把 right_div 分为
    right_top 和 right_center ,也就是说先把整体页面分为左边的图片轮播和右边登录和右上角部分
    共有三个部分代码:
    1、注册页面代码(register.htm)

    <!DOCTYPE html>
    <!-- 属性lang是英语language的缩写,意思是语言,”en”代表英语,”zh-CN”代表中文 -->
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>QQ注册</title>
    	<link rel="icon" type="image/x-icon" href="./image/logo.png">
    	<link rel="stylesheet" type="text/css" href="./css/login.css">
    </head>
    <body>
    	<div id="logo_div">
    		<div><img src="./image/logo.png"></div>
    		<div>QQ</div>
    	</div>
    	<div id="left_div">
    		<img id="change_image" src="./image/1.jpg">
    	</div>
    	<div id="right_div">
    		<div id="right_top">
    			<div class="iteam">
    				<div class="iteamText">意见反馈</div>
    			</div>
    				<!-- onmouseenter 事件在鼠标指针移动到元素上时触发。
    			    该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。 -->
    			<div id="allxiala_div" class="iteam" onmouseenter="show_xiala()"  onmouseleave="hiden_xiala()">
    				<div class="iteamText">简体中文</div>
    				<div><img id="xiala_img" src="./image/down.png"></div>
    				<div id="xiala_div">
    					<div>繁體中文</div>
    					<div>English</div>
    				</div>
    			</div>
    			<div class="iteam" id="iteam_search">
    				<div><img src="./image/logo3.png"></div>
    				<div class="iteamText" id="iteam1" onmouseenter="liang_into()"  onmouseleave="liang_leave()">QQ靓号</div>
    				<div id="search" onmouseenter="liang_into()" onmouseleave="liang_leave()">
    					<div id="search_top">
    						<input type="" name="" placeholder="输入QQ靓号,如1992,520">
    						<a id="search_image"></a>
    					</div>
    					<div id="search_bottom">
    						<a href="">生日</a>
    						<a href="">星座</a>
    						<a href="">爱情</a>
    						<a href="">手机</a>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div id="right_center">
    			<div id="text1">欢迎注册QQ</div>
    			<div id="text2">
    				<div id="text_div1">每一天乐在沟通</div>
    				<div id="text_div2">免费靓号</div>
    			</div>
    			<div class="input_div">
    				<input class="input" type="text" placeholder="昵称" name="username" id="username">
    			</div>
    			<div class="input_div">
    				<input class="input" type="password" placeholder="密码" name="password" id="password">
    			</div>
    			<div id="phone_div">
    				<input type="text" name="areaCode" id="areaCode" value="+86">
    				<input type="text" name="phoneNum" id="phoneNum" placeholder="手机号码">
    			</div>
    			<div id="info">可通过该手机号找回密码
    			</div>
    			<div>
    				<input type="submit" name="submit" id="submit" value="立即注册">
    			</div>
    
    			<div id="check">
    				<div>
    					<img id="gou_img" src="./image/checkbox_check.png" onclick="gouxuan()">
    					我已阅读并同意相关服务条款和隐私政策
    					<img id="jiantou_img" src="./image/down.png" onclick="jiantou()">
    					<div id="xieyi_div">
    						<a href="">《QQ号码规则》</a>
    						<a href="">《隐私政策》</a>
    						<a href="">《QQ空间服务协议》</a>
    					</div>
    				</div>
    			</div>
    		</div>
    
    		<div id="footer">
    			Copyright © 1998-2019Tencent All Rights Reserved
    		</div>
    	</div>
    
    	<script type="text/javascript" src="./js/login.js"></script>
    </body>
    </html>
    

    2、css代码(login.css)

    body{
    	padding: 0;
    	margin: 0;
    	/* 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话 */
    	overflow-x: hidden;
    }
    #logo_div{
    	position: fixed;   
    	top: 0;
    	left: 0;
    	height: 43px;
    	margin-top: 30px;
    	margin-left: 30px;
    	/* 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
    	z-index: 2;
    	/* pointer属性表示光标呈现为指示链接的指针(一只手) */
    	cursor: pointer;
    }
    #logo_div div{
    	float: left;
    	display: inline-block;
    	height: 43px;
    	line-height: 43px;
    	font-size: 36px;
    }
    
    #left_div{
    	position: fixed;
    	width: 490px;
    	height: 100%;
    }
    #left_div img{
    	width: 480px;
    	height: 100%;
    }
    
    /*---------- 右上角部分代码()---------------*/
    #right_center input{
    	padding-left: 10px;
    }
    #right_div{
    	margin-left: 490px;
    }
    
    #right_top{
    	width: 100%;
    }
    .iteam{
    	/* displsy:inline-block;顾名思义就是行内块的意思了。
    	也就是说他具血了行内元素的不换行特征,同时也具有块元素的可以设置宽高等特征 */
    	display: inline-block;
    	height: 34px;
    	float: right;
    	margin: 20px 40px 0 0;
    }
    .iteam div{
    	float: left;
    	height: 34px;
    	/* 对于块级元素,line-height指定了元素内部line-boxes的最小高度
    	对于非替代行内元素,line-height用于计算line-box的高度
    	对于替代行内元素,例如input、button,line-height没有影响 */
    	line-height: 34px;
    	cursor: pointer;
    	color: #888;
    }
    #allxiala_div{
    	position: relative;
    }
    #xiala_div{
    	width: 82px;
    	height: 70px;
    	clear:both;
    	display: absolute;
    	top:20px;
    }
    #xiala_div div{
    	width: 80px;
    	height: 34px;
    	text-align: center;
    	clear:both;
    	display: block;
    }
    #iteam1{
    	background-color: #f54444;
    	/* 向 div 元素添加圆角边框 */
    	border-radius: 6px;  
    	color: #fff;
    }
    .iteamText{
    	width: 80px;
    	/* align 属性规定 div 元素中的内容的水平对齐方式,这里为居中 */
    	text-align: center;
    	font-weight: 300;
    	color: #000;
    
    }
    
    /*-------------------QQ靓号搜索框-----------------*/
     a:link{text-decoration:none; cursor:pointer;color: #359eff;}
     a:visited{text-decoration:none; cursor:pointer;color: #359eff;}
     a:active{text-decoration:none; cursor:pointer;color: #2b72ff;}
     a:hover{text-decoration:none; cursor:pointer;color: #2b72ff;}
    #iteam_search{
    	position: relative;
    }
    #search{
    	position: absolute;
    	top: 34px;
    	left: -150px;
    	width: 250px;
    	height: 100px;
    	border: 1px solid #f0f0f0;
    	background-color:#fff;
    	z-index: 10;
    }
    #search div{
    	width: 100%;
    	height:49px;
    }
    #search_top{
    	border-bottom: 1px solid #eee;
    }
    #search_top input{
    	width: 200px;
    	height: 42px;
    	border:none;
    	outline:none;
    	font-size: 16px;
    	padding: 3px;
    	color: #aaa;
    	/*margin: 3px;*/
    }
    #search_image{
    	float: right;
    	display: inline-block;
    	width: 40px;
    	height: 47px;
    	border:1px solid #eee;
    	background: no-repeat center;
    	background-image: url(../image/search.png);
    }
    #search_image:hover{
    	background-color:#f54444;
    	background-image: url(../image/search-hover.png);
    }
    #search_bottom{
    	text-align: center;
    	text-decoration:none
    }
    /*------------中间注册部分代码----------------*/
    #right_center{
    	width: 100%;
    	padding-top: 120px;
    	padding-left: 240px;
    }
    
    #text1{
    	font-size: 44px;
    	margin-bottom: 30px;
    }
    #text2 div{
    	font-size: 28px;
    	display: inline-block;
    }
    
    #text_div2{
    	color: #359eff;
    	margin-left:200px;
    	margin-bottom: 30px;
    	cursor: pointer;	
    }
    input{
    	border: 1px #aaa solid;
    	border-radius: 4px;
    	font-size: 20px;
    	height: 50px;	
    }
    .input{
    	width: 500px;
    	
    }
    .input_div{
    	margin-top: 30px;
    }
    
    #areaCode{
    	width: 120px;
    	
    }
    #phone_div{
    	margin-top: 30px;
    }
    #phoneNum{
    	margin-left: 10px;
    	width: 354px;
    }
    #info{
    	font-size: 14px;
    	height: 14px;
    	color: #999;
    	margin-top: 7px;
    }
    #submit{
    	width: 510px;
    	border: 1px #3083ff solid;
    	background-color:#3487ff;
    	color: #fff;
    	margin-top: 40px;
    }
    
    #check{
    	margin-top: 30px;
    	height: 70px;
    	font-size: 13px;
    	color:#aaa;
    	margin-bottom: 60px;
    }
    #check div{
    	line-height: 30px;
    }
    #xieyi_div a{
    	display: block;
    	font-size: 14px;
    	line-height: 18px;
    }
    #footer{
    	text-align: center;
    	font-size: 14px;
    	color: #bbb;
    	/* 规定应该从父元素继承字体的粗细 */
    	font-weight: inherit;
    	padding-bottom: 40px;
    }
    

    3.js代码(login.js)

    // onload 事件会在页面或图像加载完成后立即发生
    window.onload =  change();
    //图片轮番显示
    function change(){
    	var i =1 ;
    	//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
    	setInterval(function(){
    		if(i>3){
    			i = 1;
    		}
    		// getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
    		document.getElementById("change_image").src='./image/'+i+'.jpg';
    		i++;
    	},3000)
    }
    //简体中文下拉以及图标变换
    var xiala_div = document.getElementById("xiala_div");
    var xiala_img = document.getElementById("xiala_img");
    xiala_div.style.display = "none";  //初始状态为none,表示下拉框不会被显示出来
    function show_xiala(){
    	xiala_div.style.display = "block";
    	xiala_img.src = "./image/up.png";
    }
    function hiden_xiala(){
    	xiala_div.style.display = "none";
    	xiala_img.src="./image/down.png";
    }
    //QQ靓号下的搜索框
    var search = document.getElementById("search");
    search.style.display = "none";
    function liang_into(){
    	search.style.display = "block";
    }
    function liang_leave(){
    	search.style.display = "none";
    }
    //勾选框变换
    var temp1 = 1//勾选
    var gou_img = document.getElementById("gou_img");
    function gouxuan(){
    	if(temp1 == 1 ){ //勾选了就不勾
    		gou_img.src = "./image/checkbox_normal.png";
    		temp1 = 2;
    	}else if(temp1 == 2){//没有勾选就勾选
    		gou_img.src = "./image/checkbox_check.png";
    		temp1 = 1;
    	}
    }
    //协议下拉框以及箭头
    var jiantou_temp = 1;//向下
    var jiantou_img = document.getElementById('jiantou_img');
    var xieyi_div = document.getElementById("xieyi_div");
    xieyi_div.style.display = "none";
    function jiantou(){
    	if(jiantou_temp==1){
    		jiantou_img.src="./image/up.png";
    		xieyi_div.style.display = "block";
    		jiantou_temp=2;
    	}else if(jiantou_temp==2){
    		jiantou_img.src = "./image/down.png";
    		xieyi_div.style.display = "none";
    		jiantou_temp=1;
    	}
    }
    

    最后总结一下,其实页面和真的QQ注册页面不一样,好多功能还没有实现哈,比如把整个页面缩小的话只显示用户名和密码框部分,覆盖掉轮播图片,这涉及到浮动和定位问题,所以代码还有待改进哈。

    我每个代码块和部分属性都有备注哈,方便大家理解,哪里有问题也欢迎大家积极提出,不懂也可以在下面留言或私聊
    最后觉得对你有用的话请点波关注不迷路哈,毕竟打字不易呀~~~~

    源文件下载:https://download.csdn.net/download/weixin_42490117/11470388

    展开全文
  • 登录注册页面跳转

    千次阅读 2020-09-02 22:06:23
    注册页面做了一点简单的判断: 伪非空验证: 还有伪密码验证: 红字提示存在两秒,两秒后消失,清除密码框内的内容,但是不清除用户名框内的文本。 然后当用户名和密码输入正确以后(其实两次密码一样就行,用户名...

    用HTML、jQuery和css写一个简单的登录注册页面

    看了一些前端部分的视频,有点手痒,想起大学时做的某管理系统的前端部分,当时基本都是靠着CV写的,现在想想应该可以自己写一点了。
    话不多说,先上图:
    首先是登录页面:
    在这里插入图片描述
    点击注册按钮可以跳转到注册页面:
    在这里插入图片描述
    注册页面做了一点简单的判断:
    伪非空验证:
    在这里插入图片描述
    还有伪密码验证:
    在这里插入图片描述
    红字提示存在两秒,两秒后消失,清除密码框内的内容,但是不清除用户名框内的文本。
    然后当用户名和密码输入正确以后(其实两次密码一样就行,用户名不空就好)就可以跳转到登录页面。这里有一个坑,这种提示用alert()方法弹框,但是alert弹窗不会自己关闭,所以一般选择跳转到另一个页面给提示,给个倒计时然后再跳转到登录页面,麻烦所以没写了。
    跳转提示:
    在这里插入图片描述
    就用一点前端的东西写了两个页面,然后跳转路径直接写另一个页面的名字,口考哦瓦力大。
    通过这次练习,基本把前端基础的部分回顾了下,也有jQuery事件绑定部分等等,不过css写的有点乱。
    首先是login页面的代码:

    <!DOCTYPE html>
    <html lang="zh">
    	<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">
    		<link rel="stylesheet" type="text/css" href="css/css.css" />
    		<title>登录</title>
    	</head>
    	<body>
    		<-!首先定义一个大的div标签,用来分几个填写框的样式,然后就是输入框和按钮,没了-->
    		<div id="bigBox" class="site-doc-icon site-doc-anim">
    			<h1>Login</h1>
    			<div class="inputBox">
    				<form action="" method="post">
    				<div class="inputText">
    					<input type="text" placeholder="请输入用户名/昵称" />
    				</div>
    				<div class="inputText">
    					<input type="password" placeholder="请输入密码" />
    				</div>
    					<button type="submit" class="inputButton" value="" >登录</button>
    					<button type="button" class="inputButton" onclick="jumpRe()">注册</button>
    				</form>
    			</div>
    		</div>
    		<-!本来准备用layui写一点,后来想想要去官网拖,意义不大,就干脆上B站找了个视频,看完了照着写一写CSS-->
    
    		<script type="text/javascript">
    		//写了函数,点击注册按钮就跳转到注册页面
    			function jumpRe(){
    			 window.location.href="register.html";
    			}
    		</script>
    	</body>
    </html>
    

    然后是register页面的内容:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>注册</title>
    		<link rel="stylesheet" type="text/css" href="css/rcss.css"/>
    	</head>
    	<body>
    	<!-自己跟着写css文件,顺便练练选择器-->
    		<h2>Simple Is Everything </h2>
    		<div id="bigBox">
    			<h1>Register</h1>
    			<div class="form-control">
    				<form action="login.html" method="get">
    						<div class="inputText">
    							<input type="text" id="uname" placeholder="请输入用户名/昵称" />
    						</div>
    						<div class="inputText">
    							<input type="password" id="pwd1" placeholder="请输入密码" />
    						</div>
    						<div class="inputText">
    							<input type="password" id="pwd2" placeholder="请确认密码" />
    						</div>
    						//span标签设为隐藏状态
    							<span id="sp" hidden="hidden" ><p>两次密码不一致,请重新输入!</p></span>
    							<button type="button" id="btnvrf" class="inputSubmit" onclick="verify()">点击注册</button>
    				</form>
    			</div>
    		</div>
    		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			function verify(){
    				if($("#pwd1").val()==""||$("#uname").val==""){
    					alert("用户名或密码不能为空!");
    				}else if($("#pwd2").val()==""){
    					alert("请输入验证密码!");
    				}else if($("#pwd1").val()!=$("#pwd2").val()){
    					//判断密码不一样时,切换span标签的状态,顺便清除pwd标签中的内容
    					$("#sp").toggle();
    					$("#pwd1").val("");
    					$("#pwd2").val("");
    					//延时两秒后,切换span标签的状态,再隐藏起来
    					setTimeout(function () {$("#sp").toggle()}, 2000);
    				}else{
    					//如果操作正确,1秒后打开注册页面,但是这里用了alert弹窗,会打断代码的运行,所以还是得手动点击确认按钮后,等待一秒才能跳转,如果以后能想起来看看怎么解决这个问题。
    					setTimeout(function () {window.open("login.html")}, 1000);
    					alert("注册完成!点击跳转到登录页面...");
    				}
    			}			
    			//鼠标变红事件,鼠标放到注册按钮上会变红(主要想看看事件绑定)		
    			$(".inputSubmit").mouseover(function(){
    				$(".inputSubmit").css({
    					"color":"red"
    				})
    			}).mouseout(function(){
    				$(".inputSubmit").css({
    					"color":"white"
    				})
    			});
    		</script>
    	</body>
    </html>
    

    然后就是login的CSS了:

    body{
    	margin:0;
    	padding: 0;
    	background-image: url(../img/bgimg.jpg);
    	background-repeat: no-repeat;
    	background-size:cover ;
    }
    
    #bigBox{
    	margin:0 auto;
    	margin-top:200px;
    	padding:20px 50px;
    	background-color:#000000;
    	opacity:0.8;
    	width:400px;
    	height:300px;
    	border-radius: 10px;
    	text-align: center;
    }
    
    #bigBox h1
    {
    	color:white;
    }
    
    #bigBox .inputBox
    {
    	margin-top:50px;
    }
    
    #bigBox .inputBox .inputText
    {
    	margin-top:20px;
    	
    }
    
    #bigBox .inputBox .inputText input
    {
    	background-color: #000000;
    	background-color: opacity:0;
    	border:0;
    	width:250px;
    	padding:10px 10px;
    	border-bottom:1px solid white;
    	color:#ffffff;
    }
    
    #bigBox .inputBox .inputButton
    {
    	border:0;
    	margin-top:15px;
    	width:120px;
    	height:25px;
    	color:#ffffff;
    	border-radius: 20px;
    	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    	background-blend-mode: multiply,multiply;
    }
    

    然后是register的CSS文件:

    body{
    	margin:0;
    	padding: 0;
    	background-image: url(../img/bgimg.jpg);
    	background-repeat: no-repeat;
    	background-size:cover ;
    }
    #bigBox{
    	margin:0 auto;
    	margin-top:150px;
    	padding:20px 50px;
    	background-color:#000000;
    	opacity:0.7;
    	width:400px;
    	height:300px;
    	border-radius: 10px;
    	text-align: center;
    }
    #bigBox h1
    {
    	color:white;
    }
    #bigBox.form-control
    {
    	margin-top:50px;
    }
    #bigBox .form-control .inputText
    {
    	margin-top:20px;
    }
    #bigBox .form-control .inputSubmit
    {
    	border:0;
    	margin-top:15px;
    	align:center;
    	color:#ffffff;
    	width:160px;
    	height:30px;
    	border-radius: 20px;
    	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    	background-blend-mode: multiply,multiply;
    }
    #sp
    {
    	color:red;
    	font-size: 16px;
    }
    h2{
    	color:gray;
    	text-align:center;
    }
    

    CSS文件中的URL要往外点一层才能找到图片,是个点

    接下来整个页面中只有jQuery的官方包需要手动导入

    <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    就是此处的src里面,需要手动从官网下一个包,然后自己导入,不然$开头获取jQuery对象会报错
    

    两个页面之间的跳转以及简单的判断就都完成了(假装完成)。

    展开全文
  • 登录注册页面和页面跳转

    千次阅读 2017-09-22 22:20:00
    要求页面登录页面:博客园登入1、页面有背景图2、有一个登录表单(用户名,密码,登录按钮,注册按钮)3、点击登录按钮跳转到学生信息表页面4、点击注册按钮跳转的注册页面 (仿新浪邮箱注册页面,点击注册跳转到...
  • 用户登录注册页面

    千次阅读 2019-03-15 14:55:47
    用户登录注册页面一、目标:在公众号网页里制作一个app的分享链接(该app已经可以微信授权登录),供用户下载app。二、要求:一、绑定过:则跳转到下载页面c,点击下载就直接开始下载app;二、未绑定:则跳转到注册...
  • Java实现登录与注册页面

    万次阅读 多人点赞 2019-05-22 09:48:25
    用java实现的登录与注册页面,实现了客户端(浏览器)到服务器(Tomcat)再到后端(servlet程序)数据的交互。 注册的html代码,页面非常丑!!请见谅。。 <body> <fieldset id=""> <legend>注册...
  • bootstrap做登录注册页面带验证

    千次下载 热门讨论 2015-12-15 18:26:05
    用bootstrap做的登录,注册页面,使用validate进行表单验证,是本人从空白页面搭建的,亲测可用,1积分算是我的辛苦费吧。 我会通过博客注明知识点:http://blog.csdn.net/qq_19558705; 希望能帮到大家。没有积分的...
  • 分步骤注册页面

    万次阅读 2019-03-07 16:58:11
    一个分步骤填写信息的注册页面 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;...
  • 注册页面新增用户

    千次阅读 2019-05-06 09:16:24
    注册页面新增用户 在我们日常浏览网网站的过程中总是会注册到各种各样的账号,如:腾讯QQ、微信、微博等等……但这些网站是怎样新增我们的用户账号、密码以及用户信息的呢? 作为一个程序员,如何新增用户信息是一...
  • 登录,注册页面详解

    千次阅读 2019-02-26 12:41:52
    ### 登录,注册页面详解 注册,登录页面非常类似,这里先着重讲登录页面。 登录页面样式: 登录后端实现思路: (我后来实现的时候没有加验证码,请忽略验证码的哪块) 为了让文章更简洁,html代码我不在这里给出,...
  • 超好看超简洁的登陆注册页面 及 源码

    千次阅读 多人点赞 2020-02-07 12:59:55
    大家好,胖虎给大家带来平时设计及作业能用上的登陆注册页面 先给大家上几张图,喜欢的后面有源码 登陆页面实现了手机号正则表达式验证,密码正则表达式验证 注册页面实现了手机号正则表达式验证,邮箱H5验证,...
  • Axure设计登录注册页面

    千次阅读 2013-07-10 22:48:48
    1、注册页面 2、登录页面
  • 用JSP做个简单的登录注册页面

    千次阅读 2020-10-21 23:49:32
    用JSP做个简单的登录注册页面 第一步先分析整个过程,然后得出大概思路。 首先,进入登录页面(login.jsp),如下: 我们是没有账号的所以需要注册账号,所以这时候必须有一个注册页面(register.jsp),如下 紧...
  • HTML登录注册页面简单实现

    千次阅读 2019-10-27 21:30:18
    效果参考:登录页面,注册页面 使用了bootstrap,jQuery。 登录页面源码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &...
  • HTML 简单实现注册页面

    千次阅读 2020-02-16 14:46:15
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...注册页面</title> <!-- 定义表单 form--> <!-- action 属性规定当提交表单时向何处发送表单数据。--&...
  • 注册页面获取手机验证码

    千次阅读 2019-05-28 09:43:49
    1.注册页面 //手机号码 2.js部分 var countdown=30; //获取验证码倒计时 function settime(obj) { if (countdown == 0) { obj.removeAttribute(“disabled”); obj.value=“获取验证...
  • 登陆注册页面的居中显示

    千次阅读 2018-12-05 23:13:08
    在网页中,常常会使用到登陆注册功能,登陆框的显示要结合设备的尺寸进行居中显示,当我们使用前端框架...登陆注册页面通常的效果图如图所示,在React中,我们使用组件化的开发,将该页面拆分为两个组件:整个背景...
  • 简单制作一个百度注册页面

    千次阅读 多人点赞 2020-10-28 12:02:39
    通过这几天对css(级联样式表)的理解,简单制作一张百度注册页面 话不多说代码奉上 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <...
  • HTML注册页面代码

    万次阅读 2015-11-11 15:50:22
    HTML注册页面代码       Untitled Document    function checkname(){  var div = document.getElementById("div1");  div.innerHTML = "";  var name1 = document.form1.text1.value;  if ...
  • 用户注册页面的设计与实现

    千次阅读 2020-10-21 18:20:46
    用户注册页面的设计与实现 功能介绍: 1.使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。 2.验证要求:每个输入栏目的文本框均需要显示提示信息。用户在点击...
  • 注册页面 <h3>用户注册</h3> <form action="#" method="post"> 账号:<input type="text" id='uName'> <br> 密码:<input type="password" id='uPwd'> <...
  • 无需注册页面路由,可直接跳转; 页面地址可以在数据库中配置; 页面分包加载,进行页面路由跳转的时候才去加载页面组件代码; 可配置页面缓存或者不缓存 老样纸,先看效果图 原理说明: 首先是分包...
  • MVC实现简单注册页面

    千次阅读 热门讨论 2014-12-02 16:12:35
    刚开始学习MVC,从Webform转过来确实有点费劲好多东东都已经换了一种形式,也在不断的适应这,下面通过讲解一个简单的注册页面来熟悉下MVC中常用的操作。  Model中的User类如下   public class User { //用号...
  • 从网上找了两个资源,一个是注册页面,一个是防止重复,想请教下怎么将这两个合起来。 # 注册页面 register.jsp ||between:3-20||isUname" data-error="用户名不能为空||用户名长度3-20位||只能输入中文、字母...
  • 登录注册页面html模版

    千次阅读 2016-12-07 16:00:53
    登录注册页面html模版 地址:http://download.csdn.net/detail/xiaosongaixiaoqian/5432033
  • servlet用户注册页面前两种输入为空和已注册情况都成功了,但往数据库插入新的数据不成功,求各位大神帮我看下哪里的问题
  • HTML注册页面代码实现(案例)

    万次阅读 2018-09-11 21:12:04
    注册页面 &amp;lt;!--定义表单 form--&amp;gt; &amp;lt;form action=&quot;#&quot; method=&quot;post&quot;&amp;gt; &amp;lt;table border=&quot;1&quot; align...
  • ASP.NET实现简单用户注册页面

    千次阅读 2020-09-07 21:07:26
    设计实现一个用户注册页面,并使用验证控件对用户输入的内容进行验证,注册信息包括:用户名、密码、确认密码、性别、邮箱、出生日期、毕业日期、身份证号、手机号。具体要求如下:(1)用户名不能为空,必须以字母...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,620
精华内容 17,448
关键字:

注册页面