CSS+H5的登录界面

最新推荐文章于 2024-06-23 10:41:54 发布

Grit_ICPC

最新推荐文章于 2024-06-23 10:41:54 发布

阅读量6.5k

点赞数 2

分类专栏： HTML/CSS/JS 文章标签： css3

本文链接：https://blog.csdn.net/Grit_ICPC/article/details/53262154

版权

HTML/CSS/JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
	<head>
		<title>后台管理系统</title>
		<meta charset="utf-8">


		<style>
			.main_bar{
				width:auto;
				height:350px;
				background-color:#6495ED; 
				margin-top:10%;
				margin-left:0%;
				padding:0px;
			}
			.login_form{
				width:40%;
				height:100%;
				background-color:#112435;  
                margin:0 auto;
			}
			#form_weight{
				width:auto;
				height:auto;
				background-color:#d0d0d0;
				margin:0 auto;
			}
			.title{
				width:100%;
				height:20%;
				color:#fff;
				text-align:center;/*使用text-align代替align*/
				font-size:20pt;
				font-family:"宋体";
			}
			.txt{
				display:block;/*设置为独占一行*/
				width:60%;
				margin:0 auto;
				height:35%;
				font-size:15pt;
				border-radius:10px;
				border:0px;
				padding-left:8px;
			}
			#icode{
				width:30%;
				height:35%;
				font-size:15pt;
				border-radius:10px;
				border:0px;
				margin-left:75px;
				padding-left:8px;
			}
			#code{
				color:#fff;
				background-color:#000;
				font-size:20pt;
				margin-left:auto;
				padding:5px 30px 5px 30px;  
				cursor:pointer;
			}
			
			

			.btn{
				
				width:70%;
				margin-left:15%;
				height:40px;
				border:0px;
				font-size:15pt;
				font-family:"微软雅黑";
				background-color:#FC5628;
				color:#fff;
				border-radius:20px;
			}
			#forget{
				width:70%;
				text-align:right;margin:0 auto;/*这两者必须一起使用*/
				padding:5px;
				
			}
			 #forget a{  
                color:#000000;  
                text-decoration:none;                 
            } 

			#forget a:hover{
				color:#ff0000;
				text-decoration:none;
			}

			#copyright{
				width:100%; 
				padding-top:20px;
				text-align:center;
				color:#707070
			}
		</style>





		<script type="text/javascript">
		var code;
		//document.getElementById("code") = changeImg;
		function changeImg(){
			var arr = new Array(
			'1','2','3','4','5','6','7','8','9','0',  
                'a','b','c','d','e','f','g','h','i','j',  
                'k','l','m','n','o','p','q','r','s','t',  
                'u','v','w','x','y','z',  
                'A','B','C','D','E','F','G','H','I','J',  
                'K','L','M','N','O','P','Q','R','S','T',  
                'U','V','W','X','Y','Z'               
            );  
			code='';
			//随机获得四个字符作为验证码
			for(var i = 0;i < 4;++ i){
				var random = parseInt(Math.random()*arr.length);
				code += arr[random];
			}
			document.getElementById('code').innerHTML = code;
		}

		function check(){
			var input = document.getElementById('icode').value;
			if(input.toLowerCase() == code.toLowerCase()){
				return true;
			}else
				alert('验证码输入不正确');
				return false;
		}
			
		</script>
	</head>
	<body οnlοad="changeImg()">
		<div  class="main_bar">
			<div class="login_form" >
				<div  class="title">
					系统登录
				</div>
				
				<form οnsubmit="return check()" action="main.html" id="form1">
					<div id="form_weight" >
						<br/>
						<input type="text" placeholder="请输入账号" value="用户名" id="box_name" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='用户名'" class="txt"/>

						<br/>
						
						<input type="password" placeholder="请输入密码" id="box_password" class="txt" value="password" οnfοcus="this.value=''"/>

						<br/>

						<input type="text" id="icode" placeholder="请输入正确的验证码" value="验证码" οnfοcus="this.value=''" οnblur="if(this.value=='')this.value='验证码'"/>
						
						<span id="code" title="看不清，换一张" οnclick="changeImg()"></span> 

						<div id="forget">
							<a href="#">忘记密码?</a>
						</div>

						<input type="submit" value="登录" class="btn"	οnmοuseοver="this.style.backgroundColor='#FF8D00'" οnmοuseοut="this.style.backgroundColor='#FC5628'"/>
						
						
						
						
					

						<div id="copyright">  
                        Power By Dqd &copy;CopyRight 2016  
						 </div>  

					</div>
				</form>

			</div>
		</div>
		
	</body>
</html>

Grit_ICPC

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS+H5的登录界面

后台管理系统 .main_bar{ width:auto; height:350px; background-color:#6495ED; margin-top:10%; margin-left:0%; padding:0px; } .login_form{ width:40%; height:10
复制链接

扫一扫

专栏目录