CSS作业练习--JD登陆框

作业，下面是京东官网登陆框；制作一个这样的页面；

 

HTML代码

 
  
  
  
  
 
 
		

			

			
			

			

		
		

			
			

				
				

					

						
						

							京东不会以任何理由要求您转账汇款，谨防诈骗。
						
					
					

						

							
								扫码登陆
							
						
						

							
								账户登陆
							
						
					
					

						

					
					

						

							
							
							
						
					
					

						

							
							 
						
					
					

						

						

							
								忘记密码
							
						
					
					

						

							
						
					
					

						

						

					
					

						

							
								
								QQ
							    |    
							
							
							微信
							
						
						

							
								
								立即注册
							
						
					
				
			
		
 

CSS代码：

/*提示信息设置*/
#alarm_info{
	font-size:12px;
	color:#999;
	background-color:rgb(251,248,234);
}

/*扫码登陆和账户登陆设置*/
#scan_login{
	font-size:18px;
	color:#666;
	font-weight:bold ;
}

#account_login{
	font-size:18px;
	color:#666;
	font-weight:bold ;
}

a{
	text-decoration:none;
}

/*设置所有的链接，鼠标悬停，字体为红色*/
a:hover{
	color:#e4393c;
}


/*鼠标点击时，颜色为红色*/
#scan_login:visited{
	color:#e4393c;
}
#account_login:visited{
	color:#e4393c;
}


/*忘记密码设置*/
#forget_pass{
	color:#666;
	font-size:14px;
}
#forget_pass:hover{
	color:#e4393c;
}

/*群组选择器*/
/*qq 微信，立即注册的图标大小控制*/
#img_qq,#img_wechat,#img_arrow{
	height:25px;
	width:30px;
}



/*群组选择器，设置登录和密码框大小*/
#uname, #upass{
	width:254px;
	height:30px;
	line-height:18px;
}

#login{
	width:300px;
	height:30px;
	background-color:#e4393c;
	border:1px solid #e85356;
	color:#fff;
	font-size:18px;
}

/*设置文本框前面的小图标*/
#img_login, #img_pass{
	width:35px;
	height:35px;
}

作业效果：

 

取色和测量工具可以用： FastStone Capture