利用HTML+CSS编辑QQ注册页面
最近在学html和css，老师布置任务要写个QQ注册页面，在观看这位大神的博客下，最后总算是完成了，有同学也感兴趣的话可以看下我写的内容。
这是那位大神的博客链接 ： https://blog.csdn.net/qq_17284055/article/details/81095214
这是我做的效果图：
要是大家觉得代码多的话可以直接导入哈，最底下有链接可以下载源文件哈
第一步,先下载个前端开发工具，工具的话有很多，例如Hbuilder 和VScode我用的是Hbuilder
VScode官网下载：https://code.visualstudio.com/
Hbuilder官网下载： http://www.dcloud.io/
第二步，具体如何实现页面，可以把整个页面分为两个部分（left_div）和（right_div），再把 right_div 分为
right_top 和 right_center ，也就是说先把整体页面分为左边的图片轮播和右边登录和右上角部分
共有三个部分代码：
1、注册页面代码（register.htm）
<!DOCTYPE html>
<!-- 属性lang是英语language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 -->
<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>
<!-- onmouseenter 事件在鼠标指针移动到元素上时触发。
该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。 -->
<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" 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_img" src="./image/checkbox_check.png" onclick="gouxuan()">
我已阅读并同意相关服务条款和隐私政策
<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-2019Tencent All Rights Reserved
</div>
</div>
<script type="text/javascript" src="./js/login.js"></script>
</body>
</html>
2、css代码（login.css）
body{
padding: 0;
margin: 0;
/* 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话 */
overflow-x: hidden;
}
#logo_div{
position: fixed;
top: 0;
left: 0;
height: 43px;
margin-top: 30px;
margin-left: 30px;
/* 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
z-index: 2;
/* pointer属性表示光标呈现为指示链接的指针（一只手） */
cursor: pointer;
}
#logo_div div{
float: left;
display: inline-block;
height: 43px;
line-height: 43px;
font-size: 36px;
}
#left_div{
position: fixed;
width: 490px;
height: 100%;
}
#left_div img{
width: 480px;
height: 100%;
}
/*---------- 右上角部分代码（）---------------*/
#right_center input{
padding-left: 10px;
}
#right_div{
margin-left: 490px;
}
#right_top{
width: 100%;
}
.iteam{
/* displsy:inline-block;顾名思义就是行内块的意思了。
也就是说他具血了行内元素的不换行特征，同时也具有块元素的可以设置宽高等特征 */
display: inline-block;
height: 34px;
float: right;
margin: 20px 40px 0 0;
}
.iteam div{
float: left;
height: 34px;
/* 对于块级元素，line-height指定了元素内部line-boxes的最小高度
对于非替代行内元素，line-height用于计算line-box的高度
对于替代行内元素，例如input、button，line-height没有影响 */
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;
/* 向 div 元素添加圆角边框 */
border-radius: 6px;
color: #fff;
}
.iteamText{
width: 80px;
/* align 属性规定 div 元素中的内容的水平对齐方式,这里为居中 */
text-align: center;
font-weight: 300;
color: #000;
}
/*-------------------QQ靓号搜索框-----------------*/
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: 240px;
}
#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;
padding-bottom: 40px;
}
3.js代码（login.js）
// onload 事件会在页面或图像加载完成后立即发生
window.onload = change();
//图片轮番显示
function change(){
var i =1 ;
//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval(function(){
if(i>3){
i = 1;
}
// getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
document.getElementById("change_image").src='./image/'+i+'.jpg';
i++;
},3000)
}
//简体中文下拉以及图标变换
var xiala_div = document.getElementById("xiala_div");
var xiala_img = document.getElementById("xiala_img");
xiala_div.style.display = "none"; //初始状态为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";
}
//QQ靓号下的搜索框
var search = document.getElementById("search");
search.style.display = "none";
function liang_into(){
search.style.display = "block";
}
function liang_leave(){
search.style.display = "none";
}
//勾选框变换
var temp1 = 1//勾选
var gou_img = document.getElementById("gou_img");
function gouxuan(){
if(temp1 == 1 ){ //勾选了就不勾
gou_img.src = "./image/checkbox_normal.png";
temp1 = 2;
}else if(temp1 == 2){//没有勾选就勾选
gou_img.src = "./image/checkbox_check.png";
temp1 = 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;
}
}
最后总结一下，其实页面和真的QQ注册页面不一样，好多功能还没有实现哈，比如把整个页面缩小的话只显示用户名和密码框部分，覆盖掉轮播图片，这涉及到浮动和定位问题，所以代码还有待改进哈。
我每个代码块和部分属性都有备注哈，方便大家理解，哪里有问题也欢迎大家积极提出，不懂也可以在下面留言或私聊
最后觉得对你有用的话请点波关注不迷路哈，毕竟打字不易呀~~~~
源文件下载：https://download.csdn.net/download/weixin_42490117/11470388
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
