HTML+CSS 实现类Github登入注册界面

前言

最近学习web，参考各种资料做了一个简陋的网站，以下是该网站的登录以及注册界面的实现。
全部代码请访问https://github.com/MiniCestbon/Web-BookStore.git.

实现效果

登录界面整体构造图：

浏览器显示效果：

HTML

以下是登录界面HTML代码（signin.html）

    
	
	


	

		

			

				
			
			
Welcome to Bookstore
		
	
	

		

			

				
用户名或电子邮箱
			
			

				

							
				
			
			

				
密码
				
忘记密码？
			
			

				

						
				
			
			

				

					登入 
				
			
		
	
	
	

		

			

				
新用户?
			
				
创建账户
	
			
			

				
Nice to meet you !
			
        
	


 

以下是注册界面的HTML代码（register.html）

    
	
	


	

		

			

				
			
			
Welcome to join us
            
创建您的账户
		
	
	

		

			

				
用户名或电子邮箱*
			
			

				

							
				
			
			

				
密码*
			
			

				

						
				
			
            

				
确认您的密码*
			
			

				

						
				
			
			

				

					注册 
				
			
		
	
	
	

		

			

				
已有账户?
			
				
点击登入
	
			
			

				
Nice to meet you !
			
        
	

CSS

以下是登录界面与注册界面共用的CSS代码（signin.css）

@charset "utf-8";
/* CSS Document */
body{
	background-color: #F9F9F9;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	line-height: 1.5;
	color: #24292e;
	}
					
.top{
    width:100%;
}

.top_center{
    width:310px;
    height:150px;
    margin:0 auto;
}

.logo{
    width:53px;
    height:53px;
    margin:0 auto;
 
}
		
.welcome{
    width:310;
    margin:0px auto;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -0.5px;
    text-align:center;
}

.main{
    width:100%;

}

.main_center{
    width:310px;
    height:235px;
    margin:0 auto;
    background-color:#FFF;
    border: 1px solid #d8dee2;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
}

.main_username{
    width:100%;
    height:30px;

}

.word{
    font-size: 16px;
    font-weight: 700;
    color:black;
}

.float_l{
    float: left;
}

.float_r{
    float: right;
}

.main_input,.main_login{
    width:100%;
    height:40px;
}

.search{
    height:20px;
    float:right;
    margin:0 auto;

}

.button{
    margin-top:8px;
    padding:8px 12px;
    font-size:14px;
    font-weight:600;
    line-height:20px;
    border:1px solid rgba(27,31,35,0.2);
    width:248px;
    background-color:#269f42;
    background-image: linear-gradient(-180deg,#34d058 0%,#28a745 90%);
    border-radius: 0.25em;
    text-align:center;

}

.foot{
    margin-top:20px;
    width:100%;
    height:100px;

}
.foot_center{
    width:310px;
    height:90px;
    margin:0 auto;
    background-color:#F9F9F9;

}

.foot_top{
    width:310px;
    height:50px;
    background-color:#F9F9F9;
    color:#0366D6;
    border:1px solid #D8DEE2;
    border-radius: 0.25em;
    text-align:center;
}

.word1{
    width:150px;
    text-align:center;
    color:#D8DEE2;
    margin-top:10px;
}

.word2{
    width:150px;
    text-align:center;
    color: aqua;
    margin-top:15px;
    font-size: 14px;
    font-weight: 700;
    margin-right: -10px;
}

.foot_tail{
    width:310px;
    height:30px;
    background-color:#F9F9F9;
    text-align:center;
    margin:0 auto;

}

.foot_word{
    margin-top:20px;
    width:310px;
    height:30px;
    text-align:center;
    font-size:16px;
}

a{
    color: blue;
    text-decoration: none;
}