自定义登录页面

html
  view

一个别具一格的登录页面

  • style位置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <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内写入 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
  • 成型样子

img