被吊打的审美---又一个登录界面

最新推荐文章于 2024-07-12 19:06:42 发布

weixin_34121304

最新推荐文章于 2024-07-12 19:06:42 发布

阅读量70

点赞数

文章标签： python

原文链接：https://my.oschina.net/AnymoreCoder/blog/778730

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果如图：

jsp:

<body class="loginPage">
	<div class="col-md-12 column" style="height:120px"></div>
	<div class="container">
		<div class="col-md-12">			
			<form name="loginForm" id="loginForm" class="form-horizontal loginForm" role="form"  method="post">		
				<div class="form-group">
					<div class="col-md-12">
						<h3 class="margin-bottom-15">AdminManage管理</h3>
					</div>
				</div>	
		        <div class="form-group">
		          <div class="col-md-12">		          	       
		            <div class="loginInput clearfix input-group">
		            	<span class="input-group-addon"><i class="fa fa-user"></i></span>  
		            	<input type="text" class="form-control" name="username" id="username" value="admin" placeholder="" style="width:60%;display:inline" title="请输入密码">
		            </div>		            		            		            
		          </div>              
		        </div>
                
		        <div class="form-group">
		          <div class="col-md-12">
		            <div class="loginInput clearfix input-group">
		            	<span class="input-group-addon"><i class="fa fa-lock"></i></span>  
		            	<input type="password" class="form-control" name="password" id="password" placeholder="" style="width:60%;display:inline" title="请输入密码">
		            </div>
		          </div>
		        </div>
		        <div class="form-group">
		          <div class="col-md-12">
		            <input id="login" type="submit" value="登录" class="btn btn-primary col-md-offset-3 col-md-2" >
		          </div>
		        </div>		    	
		      </form>		      
		</div>
	</div>
</body>

css:


*, body { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { margin-bottom: 30px; }
h3 {	
	margin-left: 30px;	
	color: black;
}
.green { color: #3C3; }
.gray { color: #999; }

.form-horizontal .control-label { padding-top: 0; }
.form-horizontal.templatemo-payment-form .radio.templatemo-no-padding-top {	padding-top: 0; }
.control-wrapper {
	position: relative;
	padding-left: 30px;
}
.control-wrapper label.fa-label {
	position: absolute;
	left: 4px;
	top: 6px;
}
.form-group:last-child { margin-bottom: 0; }

.templatemo-form-list-container { max-width: 600px; }
.loginInput { position: relative; }
.loginInput .fa {
	color: gray;
	position: absolute;
	left: 10px;
	top: 10px;
}

.templatemo-container {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid #dedede;
	border-radius: 8px;
	margin: 0 auto;
	padding: 30px;
}
.loginPage {
	background-color: rgb(70, 90, 40);
	background-image: url(img4.jpg);
}
.loginPage {
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;	
}
.loginPage { background-size: cover; }
.font-size-small { font-size: 0.8em; }
.margin-bottom-15 {	margin-bottom: 15px; }
.margin-bottom-30 {	margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-group a {	line-height: 34px; }
.fa { font-size: 16px; }
.fa.login-with {
	font-size: 30px;
	margin: 0 5px;
}
.fa-medium { font-size: 20px; }


.loginForm {
	background: rgba(255,255,240,0.4);
	border-radius: 8px;
	color: rgb(197,197,197);
	max-width: 500px;
	margin: 30px auto 0 auto;
	padding: 30px 0px 30px 90px;
}

转载于:https://my.oschina.net/AnymoreCoder/blog/778730