QQ注册页面

最近复议基础知识，昨天写了一个QQ注册页面

效果图如下

 

	
	
	
	


	

		

		
QQ
	
	

		
	
	

		

			

				
意见反馈
			
			

				
简体中文
				

				

					
繁體中文
					
English
				
			
			

				

				
邮箱账号
			
			

				

				
QQ靓号
				

					

						
						
					
					

						生日
						星座
						爱情
						手机
					
				
			
		
		

			
欢迎注册QQ
			

				
每一天乐在沟通
				
免费靓号
			
			

				
			
			

				
			

			

				
				
			
			
可通过该手机号找回密码
			
			

				
			

			

				

					 同时开通QQ空间
				
				

					
					我已阅读并同意相关服务条款和隐私政策
					
					

						《QQ号码规则》
						《隐私政策》
						《QQ空间服务协议》
					
				
			
		

		

			Copyright © 1998-2018Tencent All Rights Reserved
		
	

	

 

body{
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}
#logo_div{
	position: fixed;
	top: 0;
	left: 0;
	height: 43px;
	margin-top: 30px;
	margin-left: 30px;
	z-index: 2;
}
#logo_div div{
	float: left;
	display: inline-block;
	height: 43px;
	line-height: 43px;
	font-size: 36px;
}

#left_div{
	position: fixed;
	width: 480px;
	height: 100%;
}
#left_div img{
	width: 480px;
	height: 100%;
}

/*--------------------------*/
#right_center input{
	padding-left: 10px;
}
#right_div{
	margin-left: 480px;
}

#right_top{
	width: 100%;
}
.iteam{
	display: inline-block;
	height: 34px;
	float: right;
	margin: 20px 40px 0 0;
}
.iteam div{
	float: left;
	height: 34px;
	line-height: 34px;
	cursor: pointer;
	color: #888;
}
#allxiala_div{
	position: relative;
}
#xiala_div{
	width: 82px;
	height: 70px;
	clear:both;
	display: absolute;
	top:20px;
}
#xiala_div div{
	width: 80px;
	height: 34px;
	text-align: center;
	clear:both;
	display: block;
}
#iteam1{
	background-color: #f54444;
	border-radius: 6px;
	color: #fff;
}
.iteamText{
	width: 80px;
	text-align: center;
	font-weight: 300;
	color: #000;

}

/*------------------------------------*/
 a:link{text-decoration:none; cursor:pointer;color: #359eff;}
 a:visited{text-decoration:none; cursor:pointer;color: #359eff;}
 a:active{text-decoration:none; cursor:pointer;color: #2b72ff;}
 a:hover{text-decoration:none; cursor:pointer;color: #2b72ff;}
#iteam_search{
	position: relative;
}
#search{
	position: absolute;
	top: 34px;
	left: -150px;
	width: 250px;
	height: 100px;
	border: 1px solid #f0f0f0;
	background-color:#fff;
	z-index: 10;
}
#search div{
	width: 100%;
	height:49px;
}
#search_top{
	border-bottom: 1px solid #eee;
}
#search_top input{
	width: 200px;
	height: 42px;
	border:none;
	outline:none;
	font-size: 16px;
	padding: 3px;
	color: #aaa;
	/*margin: 3px;*/
}
#search_image{
	float: right;
	display: inline-block;
	width: 40px;
	height: 47px;
	border:1px solid #eee;
	background: no-repeat center;
	background-image: url(../image/search.png);
}
#search_image:hover{
	background-color:#f54444;
	background-image: url(../image/search-hover.png);
}
#search_bottom{
	text-align: center;
	text-decoration:none
}
/*----------------------------*/
#right_center{
	width: 100%;
	padding-top: 120px;
	padding-left: 180px;

}

#text1{
	font-size: 44px;
	margin-bottom: 30px;
}
#text2 div{
	font-size: 28px;
	display: inline-block;
}

#text_div2{
	color: #359eff;
	margin-left:200px;
	margin-bottom: 30px;
	cursor: pointer;	
}
input{
	border: 1px #aaa solid;
	border-radius: 4px;
	font-size: 20px;
	height: 50px;	
}
.input{
	width: 500px;
	
}
.input_div{
	margin-top: 30px;
}

#areaCode{
	width: 120px;
	
}
#phone_div{
	margin-top: 30px;
}
#phoneNum{
	margin-left: 10px;
	width: 354px;
}
#info{
	font-size: 14px;
	height: 14px;
	color: #999;
	margin-top: 7px;
}
#submit{
	width: 510px;
	border: 1px #3083ff solid;
	background-color:#3487ff;
	color: #fff;
	margin-top: 40px;
}

#check{
	margin-top: 30px;
	height: 70px;
	font-size: 13px;
	color:#aaa;
	margin-bottom: 60px;
}
#check div{
	line-height: 30px;
}
#xieyi_div a{
	display: block;
	font-size: 14px;
	line-height: 18px;
}
#footer{
	text-align: center;
	font-size: 14px;
	color: #bbb;
	font-weight: inherit;
	margin-bottom: 40px;
}

 

window.onload = change();
//图片轮番显示
function change(){
	var i = 1;
	setInterval(function(){
			if(i>3){
				i=1;
			}
			document.getElementById("change_image").src='./image/'+i+'.jpg';
			i++;
		},3000);
}
//QQ靓号下的搜索框
var search = document.getElementById("search");
search.style.display = "none";
function liang_into(){
	// alert(2)
	search.style.display = "block";
}
function liang_leave(){
	search.style.display = "none";
}
//简体中文下拉以及图标变换
var xiala_div = document.getElementById("xiala_div");
var xiala_img = document.getElementById("xiala_img");
xiala_div.style.display = "none";
function show_xiala(){
	xiala_div.style.display = "block";
	xiala_img.src="./image/up.png";
}
function hiden_xiala(){
	xiala_div.style.display = "none";
	xiala_img.src="./image/down.png";
}
//勾选框变换
var temp1 = 1//勾选
var temp2 = 1
var gou_img1 = document.getElementById("gou_img1");
var gou_img2 = document.getElementById("gou_img2");
function gouxuan1(){
	if(temp1 == 1 ){ //勾选了就不勾
		gou_img1.src = "./image/checkbox_normal.png";
		temp1 = 2;
	}else if(temp1 == 2){//没有勾选就勾选
		gou_img1.src = "./image/checkbox_check.png";
		temp1 = 1;
	}
}
function gouxuan2(){
	if(temp2 == 1 ){ //勾选了就不勾
		gou_img2.src = "./image/checkbox_normal.png";
		temp2 = 2;
	}else if(temp2 == 2){//没有勾选就勾选
		gou_img2.src = "./image/checkbox_check.png";
		temp2 = 1;
	}
}
//协议下拉框以及箭头
var jiantou_temp = 1;//向下
var jiantou_img = document.getElementById('jiantou_img');
var xieyi_div = document.getElementById("xieyi_div");
xieyi_div.style.display = "none";
function jiantou(){
	if(jiantou_temp==1){
		jiantou_img.src="./image/up.png";
		xieyi_div.style.display = "block";
		jiantou_temp=2;
	}else if(jiantou_temp==2){
		jiantou_img.src = "./image/down.png";
		xieyi_div.style.display = "none";
		jiantou_temp=1;
	}
}

 

下载地址：

https://download.csdn.net/download/qq_17284055/10548303#0-qzone-1-74315-d020d2d2a4e8d1a374a433f596ad1440