前端登录页面 （背景换肤 + 密码错误提示 + 密码隐藏切换）

}

.btnx{

width: 20px;

height: 20px;

box-sizing: border-box;

position: absolute;

top: 10px;

left: 13px;

background-color: rgb(204, 204, 204);

border: 2px solid;

border-color: rgb(59, 59, 59);

color: rgb(59, 59, 59);

text-align: center;

line-height:13px;

font-size: 23px;

cursor: pointer;

}

.changebox{

width: 900px;

height: 130px;

box-sizing: border-box;

background-color: transparent 70%;

position: absolute;

right: 260px;

top: 32px;

display: none;

}

.imgbox li{

border: 2px solid;

border-color: rgb(190, 202, 202);

list-style: none;

float: left;

margin-top: -7px;

margin-left: 20px;

margin-right: 20px;

width:160px;

height: 110px;

background-color: rgb(67, 143, 243);

cursor: pointer;

}

.imgg{

width: 160px;

height: 110px;

}

#divout{

box-sizing: border-box;

position: absolute;

top: 50%;

left: 50%;

margin-left:-216px;

margin-top: -160px;

display: inline-block;

width: 450px;

height: 180px;

background-color: transparent;

}

#divout #div1{

box-sizing: border-box;

display: inline-block;

width: 450px;

height: 55px;

background-color:transparent;

border-bottom:3px solid;

border-color: rgb(255, 255, 255) ;

background-color: trans;

padding-left: 10px;

padding-top: 5px;

}

#divout #div2{

box-sizing: border-box;

display: inline-block;

width: 450px;

height: 70px;

background-color: transparent;

}

#divout #div3{

box-sizing: border-box;

display: inline-block;

width: 450px;

height: 55px;

background-color: transparent;

border-bottom:3px solid;

border-color: rgb(255, 255, 255) ;

background-color: transparent;

padding-left: 10px;

padding-top: 5px;

}

#text1{

height: 44px;

width: 360px;

border: 0;

outline: none;

font-size: 24px;

background-color: transparent;

color: rgb(255, 255, 255);

}

input::placeholder{

color: rgb(255, 255, 255);

}

#pwd{

height: 44px;

width: 360px;

border: 0;

outline: none;

font-size: 24px;

background-color:transparent;

color: rgb(255, 255, 255) ;

}

#img1{

position:absolute;

right: 19px;

top: 145px;

width: 30px;

height: 30px;

}

#yn{

box-sizing: border-box;

position:absolute;

right: 50px;

top: 400px;

width: 400px;

height: 60px;

}

.message{

background:url(./登录/正确.png) no-repeat left center ;

background-size: 5% 100%;

padding-left: 25px;

font-weight: bold;

color: rgb(255, 255, 255);

display: none;

}

.wrong{

background: url(./登录/错误空心.png) no-repeat left center;

background-size: 5% 100%;

color: rgb(214, 150, 150);

}

.right{

background: url(./登录/正确.png) no-repeat left center;

background-size: 5% 100%;

color: rgb(150, 224, 166);

}

.submit{

position: absolute;

top:520px;

left: 505px;

width: 455px;

height: 70px;

background-color: rgb(251, 191, 60);

font-size: 35px;

color: rgb(73, 73, 73);

font-weight: bold;

-webkit-border-radius:30px;

-moz-border-radius:30px;

}

请 选 择 背 景

x

• 
• 
• 
• 
• 

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  后记

  ---

  总结一下这三次面试下来我的经验是：

  1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

  2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

  3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

  4. 多刷面经！

  我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！

  篇幅有限，仅展示部分内容

  
  
  

  深度与广度，让面试官发现你的闪光点！

  4. 多刷面经！

  我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！

  篇幅有限，仅展示部分内容