自定义登录页面

一个别具一格的登录页面

• style位置

  <style type="text/css">
  		body{margin: 0px;padding: 0px;background-image:url();background-repeat: no-repeat;}
  		#bigbox{
  			margin: 150px 50px 0px 1000px;padding: 20px 50px;background-color: rgba(35, 57, 94, 0.7);
  			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 span{
  			color: white;
  		}
  		#bigbox .inputBox .inputText input{
  			border: 0px;padding: 10 10px;border-bottom:1px solid white;background-color: #000000;
  			color: white;
  		}
  		#bigbox .inputBox .inputButtn{
  			border: 0px;width: 150px;height: 20px;color:white; margin-top: 30px;border-radius: 20px;
  			background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
  			
  		}
  	</style>
    

• body内写入

<div id="bigbox">
	<h1>LOGIN</h1>
	<div class="inputBox">
		
		<div class="inputText">
			<span class="iconfont icon-yonghu"></span>
		<input type="text" placeholder="Username"/>
		</div>
	
		<div class="inputText">
			<span class="iconfont icon-Lock_icon"></span>
			<input type="password" placeholder="Password"/>
		</div>
		
	<input type="button" class="inputButtn" value="LOGIN" />
	</div>
</div>

• 成型样子