简单的登录页面设计；

最新推荐文章于 2023-06-15 10:18:09 发布
以墨言智
最新推荐文章于 2023-06-15 10:18:09 发布
阅读量4.1k
点赞数
分类专栏： JavaWeb学习总结_old
本文链接：https://blog.csdn.net/wu631464569/article/details/52095066
版权
JavaWeb学习总结_old 专栏收录该内容
16 篇文章 0 订阅
订阅专栏
日期： 2016-8-2
内容：简单的登录页面设计源代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <script type="text/javascript" src="../../js/jquery/jquery-1.8.3.js" ></script>
			<!--
        	作者：offline
        	时间：2016-02-22
        	描述：引入JQuery&BootStrap3.0
        -->
        <!--<script type="text/javascript" src="../../js/jquery/jquery-2.1.0.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/bootstrap.min.js" ></script>
        <script type="text/javascript" src="../../js/BootStrap/npm.js" ></script>-->
        <script type="text/javascript" src="../../js/BootStra2.0/bootstrap.js" ></script>
        <script type="text/javascript" src="../../js/BootStra2.0/bootstrap.min.js" ></script>
        <!--引入jquery-->

        <!--
        	作者：offline
        	时间：2016-03-29
        	描述：在这里编写Jquery控制
        -->
        <script type="text/javascript">
			$(document).ready(function(){
				
				$("#login_button_style").click(function(){
				var username = $(".username1").val();
				var password1 = $(".password1").val();
				if(username == "" || password1 == ""){
					
					if(username == "")
					{
						//将光标定位到用户名输入框
						$(".username1").focus();
						$("#username_err_message1").html("用户名不可以为空，请注意！").addClass(".img_username");
						return false;
					}
					if(password1 == ""){						
						//将光标定位到密码输入框
						$(".password1").focus();
						$("#password_err_message1").html("密码不可以为空，请检查!").addClass(".img_username");
						return false;
					}
				}else{
					//重新刷新页面
					location.reload();
					$(".login1_form_style").submit().alert("确定要登录？");
				}
			});
			});
        </script>
        <!--
        	作者：offline
        	时间：2016-02-22
        	描述:引入CSS：BootStrap3.0
        -->
		<link rel="stylesheet" href="../../css/BootStrap2.0/bootstrap-responsive.css" />
		<link rel="stylesheet" href="../../css/BootStrap2.0/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="../../css/BootStrap2.0/bootstrap.css" />
		<link rel="stylesheet" href="../../css/BootStrap2.0/bootstrap.min.css" />
		<!--
			自定义CSS样式(内联)
		-->
		<style type="text/css">
			/*#password_err_message1{
				margin-left: 25px !important;
			}*/
			.img_username{
				color: red;
				background-image: url(../../img/loginDemoPng/error_message_pic.png);
				background-repeat: no-repeat;
			}
			
			#username_err_message1{
				margin-left: 20px !important;
			}
				
			
			.container{
				background-color: rgb(200,500,600);
				width: 1340px;
				height: 100px;
				margin: 0 auto;
			}
			
			.main{
				width: 1340px;
				height: 1440px;
				margin: 0 auto;
				margin-top: 50px;
				background-color: papayawhip;
				padding-top: 20px;
			}
			
			.footer{
				background-color: lightgray;
				width: 1340px;
				height: 200px;
				margin: 0 auto;
				margin-top: 100px;
			}
			
			.part1,.part2,.part3{
				background-color: azure;
				width: 1300px;
				height: 440px;
				margin: 0 auto;
				margin-top: 20px;
				margin-left: 20px;
				margin-right: 20px;
			}
			
			
			/*.login1,.login2,.login3,.login4,.login5,.login6{
				width: 600px;
				height: 400px;
				margin: 0 auto;
				background-color: goldenrod;
			}*/
			
			.login1{
				background-color: palegreen;
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: absolute;
				margin-top:20px ;
				margin-left: 20px;
				
			}
			
			.login2{
				background-color: palegreen;
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: absolute;
				margin-top:20px ;
				margin-left: 680px;
				
			}
			
			.login3{
				background-color: palegreen;
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: absolute;
				margin-top:20px ;
				margin-left: 20px;
				
			}
			
			.login4{
				background-color: palegreen;
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: absolute;
				margin-top:20px ;
				margin-left: 680px;
				
			}
			
			.login5{
				background-color: palegreen;
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: absolute;
				margin-top:20px ;
				margin-left: 20px;
				
			}
			
			.login6{
				background-color: palegreen;
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: absolute;
				margin-top:20px ;
				margin-left: 680px;
				
			}
			
			.form1{
				margin-top: 50px;
				margin-bottom: 50px;
				margin-left: 100px;
				margin-right: 100px;
			}
			
			/*#username1{
				margin-left: 200px;
				
			}
			
			#u1{
				margin-left: 0px;
			}
			*/
			.u1,.UserName{
				float: left;
			}
			.u1{
				margin-left: 50px;
				margin-top: 150px;
			}
			.UserName{
				margin-left: 150px;
				background-image: url(../../img/loginDemoPng/username.png);
				background-repeat: no-repeat;
			}
			.loginDemo1{
				/*background-color: paleturquoise;*/
				height: 200px;
				width: 400px;
				position:absolute;
				padding-left: 150px;
				padding-top: 100px;
				margin-top: 10px;
			}
			.word_style{
				font-size: 20px;
			}
			#login_button_style{
				width: 300px;
				height: 30px;
				font-size: 20px;
				color: blanchedalmond;
			}
			.username1{
				background-image: url(../../img/loginDemoPng/username.png);
				background-repeat: no-repeat;
				padding-left:25px !important ;
				
			}
			.password1{
				background-image: url(../../img/loginDemoPng/password.png);
				background-repeat: no-repeat;
				padding-left: 25px !important;
			}
			#check{
				width: 120px;
				background-image: url(../../img/loginDemoPng/check.png);
				background-repeat: no-repeat;
				padding-left:28px; !important;
			}
			.style{
				height:300px ;
				
			}
			#user1,#password1{
				height: 25px;
				width: 300px;
			}
		</style>
		<title>表单登录设计</title>
	</head>
	<body>
		<div class="container"></div>
		<div class="main">
			<div class="part1">
				<div class="login1">
					<form action="login_success.html" class="login1_form_style" method="get">
						<div class="loginDemo1">
							
							<!--<span for="user1" class="word_style">用户名：   </span>-->
							<input type="text" class="username1 style" id="user1" placeholder="用户名/邮箱/手机" style="text-align: 100;" /><br />
							<div class="img_username">
								<label id="username_err_message1"></label>
							</div>
							
							<!--<span for="password" class="word_style">密    码： </span>-->
							<input type="password" class="password1 style" id="password1" placeholder="密码" /><br />
							<label id=""></label>
							
							
							<label id="check"></label>
							<!--<span for="check" class="word_style">验证码： </span>-->
							<input type="text" class="check" id="check" placeholder="验证码" /><br />
							<div>
								<input type="submit	"  class="btn btn-inverse" id="login_button_style" value="登        录"/>
							</div>
						</div>
					</form>
				</div>
				<div class="login2"></div>
			</div>
			<div class="part2">
				<div class="login3"></div>
				<div class="login4"></div>
			</div>
			<div class="part3">
				<div class="login5"></div>
				<div class="login6"></div>
			</div>
		</div>
		
		<div class="footer"></div>
	</body>
</html>