✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：前端案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：QQ注册界面仿写（HTML+CSS+JS）
更多内容点击👇
       JavaScript—实现手风琴画册

文章目录

• • 项目素材
  • 项目展示
  • 项目框架
  • 部分知识思路
  • 项目代码

项目素材

各个图片的下载地址如下：

• true.png 图片下载地址：https://qq-web.cdn-go.cn/zc.qq.com/f59c7d00/v3/img/icon-tick@3x.png
• 箭头.png 图片下载地址：https://qq-web.cdn-go.cn/zc.qq.com/f59c7d00/v3/img/icon-arrow-right@3x.png
• 昵称提示.png 图片下载地址：https://qq-web.cdn-go.cn/zc.qq.com/f59c7d00/v3/img/icon-error@3x.png
• 正确提示.png 图片下载地址：https://qq-web.cdn-go.cn/zc.qq.com/f59c7d00/v3/img/icon-ok@3x.png
• 注册.gif 图片下载地址：https://qq-web.cdn-go.cn/zc.qq.com/f59c7d00/v3/img/bg-video.mp4

项目展示

【1】整体页面静态效果展示：

【2】主体部分动态运行效果展示

项目框架

  HTML静态页面、CSS样式以及JavaScript动态效果很好的分离了。HTML来布局、创建页面对象，CSS来操控对象的样式，JS来赋予对象动作，分离后便于我们更好的维护代码。

部分知识思路

【1】HTML部分

  此部分中，仁者见仁智者见智，每个人对结构的把握不一，所以编写出来的代码也不一样。我将整体页面分为了头部、主体、尾部三个部分来编写的，主体部分又进行了结构的细化，如下图所示：

【2】CSS部分

  去除默认的一些样式：

* {margin: 0;padding: 0;border: none;transition: all .2s;
}

  添加整体背景动图，全覆盖的方法如下：

	background-image: url("../img/注册.gif");background-size: cover;

  输入框的 圆角边框 效果：

border-radius: 4px;

  开启定位的规律是 父相子绝 ，即父元素开启相对定位，然后子元素开启绝对定位；如下面的代码，class名为divTel的元素开启相对定位，class名为aTel的子元素开启绝对定位。

.divTel{position: relative;border-radius: 5px;/*width: 335px;*/height: 36px;margin-bottom: 26px;background: #EEF7FC;
}
.aTel{position: absolute;left: 5px;top: 10px;font-size: 14px;color: black;
}

【3】JS部分

获取某个元素的方法：
  document.querySelector()

获取某一组集合的元素的方法：
  document.querySelectorAll()

鼠标移入移出事件：下面是鼠标移入移出时输入框的颜色发生变化的效果。

	inputEle.onmouseover=function (){this.style.border='1px black solid';}inputEle.onmouseout=function (){this.style.border='1px transparent solid';}

鼠标获取焦点和失去焦点事件：

	inputEle.onfocus=function (){}inputEle.onblur=function (){}

元素的隐藏显示功能，可通过 display 属性来实现：

• 隐藏：ele.style.display=‘none’;
• 显示：ele.style.display=‘block’;

项目代码

【1】HTML静态页面的代码

QQ靓号
简体中文
意见反馈


欢迎注册QQ
每一天，乐在沟通。
昵称不能为空
密码不能为空
+86
手机号不能为空
我已阅读并同意服务协议和QQ隐私保护指引



Copyright  © 1998-2022 Tencent All Rights Reserved.

【2】CSS样式代码

* {margin: 0;padding: 0;border: none;transition: all .2s;
}
body{background-image: url("../img/注册.gif");background-size: cover;overflow-y: hidden;
}
input{border-radius: 5px;width: 304px;height: 36px;/*margin-bottom: 26px;*/background: #EEF7FC;color: #999;font-size: 14px;padding: 0 8px;
}
form>div{margin-bottom: 26px;
}
.inputIn{border: 1px transparent solid;
}
.divIn img{width: 16px;height: 16px;margin-top: 10px;
}
.divIn span{position: absolute;z-index: 1;padding-left: 5px;margin-top: 15px;font-size: 12px;color: #ff5765;line-height: 0.5;/*height: 30px;*/
}
.divMain{width: 320px;height: 391px;/*background: yellowgreen;*/margin: 220px auto 0 auto;
}
.welcome {width: 320px;height: 57px;font-size: 38px;line-height: 1.5;font-weight: 500;margin-bottom: 8px;color: #000;
}
.header {width: 320px;height: 23px;font-size: 18px;margin-bottom: 32px;line-height: 1.3;color: #000;
}
.divTel{position: relative;border-radius: 5px;/*width: 335px;*/height: 36px;margin-bottom: 26px;background: #EEF7FC;
}
.inputTel{/*position: absolute;*/float: right;width: 236px;border: 0;}
.aTel{position: absolute;left: 5px;top: 10px;font-size: 14px;color: black;
}
.divTel div{margin-top: 10px;
}
.icon-arrow{background-image: url("../img/箭头.png");display: inline-block;margin-left: 40px;margin-top: 10px;width: 16px;height: 16px;vertical-align: text-bottom;background-position: 50% 50%;background-size: cover;
}
.divTrue{margin-top: -15px;margin-bottom: 29px;
}
.agreement-wrap__text {/*display: inline-block;*/line-height: 1.5;font-size: 12px;margin-left: 6px;color: black;position: absolute;
}
.inputCb{width: 16px;height: 16px;margin-bottom: 0;border-radius: 50%;
}.text-link{outline: 0;text-decoration: none;color: #359eff;
}
.btn-submit {display: block;margin-top: 12px;padding: 11px 0;width: 100%;height: 100%;font-size: 14px;line-height: 1.5;cursor: pointer;color: white;background: #0085ff;border-radius: 4px;
}
.footer{margin-bottom: 13px;width:100%;height:35px;line-height:35px;position:fixed;bottom:0px;left:0px;font-size:12px;color:#999;text-align:center;
}

【3】JavaScript动态效果代码

var inputEles = document.querySelectorAll(".inputIn");
for (var inputEle of inputEles) {inputEle.onmouseover=function (){this.style.border='1px black solid';}inputEle.onmouseout=function (){this.style.border='1px transparent solid';}inputEle.onfocus=function (){this.style.border='1px #549DF8 solid';var ele= this.nextElementSibling;ele.style.display='none';this.onmouseout=null;this.onmouseover=null;this.parentElement.style.marginBottom='26px';}inputEle.onblur=function (){if(this.value==''){this.style.border='1px #FF5B5B solid';var ele= this.nextElementSibling;ele.style.display='block';this.parentElement.style.marginBottom='16px';}this.onmouseout=null;this.onmouseover=null;}
}
var inputEle1 = document.querySelector(".inputTel");
var divEle1 = document.querySelector(".divTrue");
inputEle1.onfocus=function (){var ele= this.nextElementSibling;ele.style.display='none';divEle1.style.marginTop='-15px'
}
inputEle1.onblur=function (){if(this.value==''){var ele= this.nextElementSibling;ele.style.display='block';divEle1.style.marginTop='35px'}
}

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。