admin 管理员组

文章数量: 1086019

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

效果图如下

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ注册</title>
	<link rel="icon" type="image/x-icon" href="./image/logo.png">
	<link rel="stylesheet" type="text/css" href="./css/login.css">
</head>
<body>
	<div id="logo_div">
		<div><img src="./image/logo.png"></div>
		<div>QQ</div>
	</div>
	<div id="left_div">
		<img id="change_image" src="./image/1.jpg">
	</div>
	<div id="right_div">
		<div id="right_top">
			<div class="iteam">
				<div class="iteamText">意见反馈</div>
			</div>
			<div id="allxiala_div" class="iteam" onmouseenter="show_xiala()"  onmouseleave="hiden_xiala()">
				<div class="iteamText">简体中文</div>
				<div><img id="xiala_img" src="./image/down.png"></div>
				<div id="xiala_div">
					<div>繁體中文</div>
					<div>English</div>
				</div>
			</div>
			<div class="iteam">
				<div><img src="./image/mail-entry.png"></div>
				<div class="iteamText">邮箱账号</div>
			</div>
			<div class="iteam" id="iteam_search">
				<div><img src="./image/logo3.png"></div>
				<div class="iteamText" id="iteam1" onmouseenter="liang_into()"  onmouseleave="liang_leave()">QQ靓号</div>
				<div id="search" onmouseenter="liang_into()" onmouseleave="liang_leave()">
					<div id="search_top">
						<input type="" name="" placeholder="输入QQ靓号，如1992,520">
						<a id="search_image"></a>
					</div>
					<div id="search_bottom">
						<a href="">生日</a>
						<a href="">星座</a>
						<a href="">爱情</a>
						<a href="">手机</a>
					</div>
				</div>
			</div>
		</div>
		<div id="right_center">
			<div id="text1">欢迎注册QQ</div>
			<div id="text2">
				<div id="text_div1">每一天乐在沟通</div>
				<div id="text_div2">免费靓号</div>
			</div>
			<div class="input_div">
				<input class="input" type="text" placeholder="昵称" name="username" id="username">
			</div>
			<div class="input_div">
				<input class="input" type="password" placeholder="密码" name="password" id="password">
			</div>

			<div id="phone_div">
				<input type="text" name="areaCode" 
				id="areaCode" 
				value="+86">
				<input type="text" name="phoneNum" id="phoneNum" placeholder="手机号码">
			</div>
			<div id="info">可通过该手机号找回密码
			</div>
			<div>
				<input type="submit" name="submit" id="submit" value="立即注册">
			</div>

			<div id="check">
				<div>
					<img id="gou_img1" src="./image/checkbox_check.png" onclick="gouxuan1()"> 同时开通QQ空间
				</div>
				<div>
					<img id="gou_img2" src="./image/checkbox_check.png" onclick="gouxuan2()">
					我已阅读并同意相关服务条款和隐私政策
					<img id="jiantou_img" src="./image/down.png" onclick="jiantou()">
					<div id="xieyi_div">
						<a href="">《QQ号码规则》</a>
						<a href="">《隐私政策》</a>
						<a href="">《QQ空间服务协议》</a>
					</div>
				</div>
			</div>
		</div>

		<div id="footer">
			Copyright © 1998-2018Tencent All Rights Reserved
		</div>
	</div>

	<script type="text/javascript" src="./js/login.js"></script>
</body>
</html>

 

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/download/qq_17284055/10548303#0-qzone-1-74315-d020d2d2a4e8d1a374a433f596ad1440

本文标签： 页面 QQ

版权声明：本文标题：QQ注册页面 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1738252046a1950955.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。