transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;
}
.btn.hover-border-4::before {
bottom: 0; left: -1px;
border-top: 1px solid rgb(28, 31, 30);
border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4::after {
top: 0; right: 0;
border-bottom: 1px solid rgb(28, 31, 30);
border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4:hover::before,
.btn.hover-border-4:hover::after {
width: 100%; height: 99%;
opacity: 1;
transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;
}
/* 15. hover-border-5 */
.btn.hover-border-5::before,
.btn.hover-border-5::after {
width: 0%; height: 0%;
opacity: 0;
}
.btn.hover-border-5::before {
top: 0; right: 0;
border-top: 1px solid rgb(28, 31, 30);
border-left: 1px solid rgb(28, 31, 30);
transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear;
}
.btn.hover-border-5::after {
bottom: 0; left: 0px;
border-bottom: 1px solid rgb(28, 31, 30);
border-right: 1px solid rgb(28, 31, 30);
transition: width 0.2s 0.15s linear, height 0.15s ease-in;
}
.btn.hover-border-5:hover::before,
.btn.hover-border-5:hover::after {
width: 100%; height: 96%;
opacity: 1;
}
.btn.hover-border-5:hover::before {
/该动画宽度延伸时间0.2s,固高度延迟0.2s后在执行动画，执行时间0.15s/
transition: width 0.2s ease-in, height 0.15s 0.2s linear /* 1,2 */
}
.btn.hover-border-5:hover::after {
/上边框延伸时间0.2s+0.15s,固宽度延迟0.35s后在执行动画，高度同理，延迟0.5s后执行/
transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out;
}
四、更多样的设计方式
=============================================================================
1.最终效果
2.与之前的相同之处
html文件中的内容及按钮的初始与前几种按钮相同，就不赘述了
btn04.html
hover me
hover me
hover me
hover me
hover me
btn04.css
- {
box-sizing: border-box;
margin: 0; padding: 0;
}
/*为方便观察，将按钮元素放于屏幕中间
1.top: 50%;left: 50%;代表可以让div块的左上顶点位于页面正中间
2.transform: translate(-50%, -50%);代表让div块向上向左分别偏移50%，这样刚好使得div块位于正中央。
*/
.btn-holder{
position: absolute ;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn {
position: relative;
display: inline-block;
width: auto; height: auto;
background-color: transparent;
border: none;
cursor: pointer;
margin: 0 auto;
min-width: 100px;
}
.btn span {
position: relative;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
top: 0; left: 0;
width: 100%;
padding: 15px 20px;
transition: 0.3s;
}
3.不同之处
可以看到在动画开始之前就是有一部分边框的。左半部分为::before插入的内容,右半部分为::after插入的内容。
我们将盒子一份为2，两边原理相同。以左侧为例子。
使用btn03中设置边框的方式，我们最多只能更改2个盒子的样式设计出不同的边框。
而在该按钮中，我们在span元素前后也插入盒子，辅助我们边框的变换。
由此我们就可以通过设置四个盒子的变化，设计出更多花式的按钮效果。
btn04.css
首先，设置文本的样式，并在span及button前后插入内容。
在这里，我们的上边框为.btn-4::before/after盒子本身，设置较低的像素使其看起来像一条线。
/— btn-4 —/
.btn-4 span {
color: rgb(28, 31, 30);
background-color: rgb(245,245,245);
}
span:before,
span:after{
position: absolute;
content: “”;
}
.btn-4::before,
.btn-4::after {
position: absolute;
content: “”;
width: 15%; height: 2px;
background-color: rgb(28, 31, 30);
z-index: 2;
}
运行效果：
4.设置hover样式
首先使上边框的两条线居中，各向中间偏移50%即可
btn04.css
/* 16. hover-border-6 */
.btn.hover-border-6::before,
.btn.hover-border-6::after {
top: 0;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-6::before {
right: 50%;
}
.btn.hover-border-6::after {
left: 50%;
}
运行效果：
接着，设置上边框的hover样式，使其原本15%的宽度，hover后转为50%即可。
btn04.css
加上如下代码：
.btn.hover-border-6:hover::before,
.btn.hover-border-6:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}
运行效果：
然后，我们以如btn03中改变边框的方式改变span:before/after两个盒子的边框，达成最终效果，左边的盒子先执行左边框的动画，在执行底边框的动画，右盒子先执行右边框的动画，在执行底边框的动画，注意动画执行时间要在上一个动画完成之后。
。
.btn.hover-border-6 span::before,
.btn.hover-border-6 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-6 span::before {
top: 0; left: 0;
border-left: 2px solid rgb(54, 56, 55);
border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span::after {
top: 0; right: 0;
border-right: 2px solid rgb(54, 56, 55);
border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span:hover::before,
.btn.hover-border-6 span:hover::after {
width: 50%; height: 96%;
opacity: 1;
transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;
}
最终效果：
5.全部代码
五个按钮的原理基本相同，第2、3、4、5个按钮在1的基础上通过改变刚开始线的位置，设置不同的动画执行时间达成效果，由于篇幅限制，仅对第一种进行详解。
btn04.html
hover me
hover me
hover me
hover me
hover me
btn04.css
- {
box-sizing: border-box;
margin: 0; padding: 0;
}
/*为方便观察，将按钮元素放于屏幕中间
1.top: 50%;left: 50%;代表可以让div块的左上顶点位于页面正中间
2.transform: translate(-50%, -50%);代表让div块向上向左分别偏移50%，这样刚好使得div块位于正中央。
*/
.btn-holder{
position: absolute ;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn {
position: relative;
display: inline-block;
width: auto; height: auto;
background-color: transparent;
border: none;
cursor: pointer;
margin: 0 auto;
min-width: 100px;
}
.btn span {
position: relative;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
top: 0; left: 0;
width: 100%;
padding: 15px 20px;
transition: 0.3s;
}
/— btn-4 —/
.btn-4 span {
color: rgb(28, 31, 30);
background-color: rgb(245,245,245);
}
span:before,
span:after{
position: absolute;
content: “”;
}
.btn-4::before,
.btn-4::after {
position: absolute;
content: “”;
width: 15%; height: 2px;
background-color: rgb(28, 31, 30);
z-index: 2;
}
/* 16. hover-border-6 */
.btn.hover-border-6::before,
.btn.hover-border-6::after {
top: 0;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-6::before {
right: 50%;
}
.btn.hover-border-6::after {
left: 50%;
}
.btn.hover-border-6:hover::before,
.btn.hover-border-6:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-6 span::before,
.btn.hover-border-6 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-6 span::before {
top: 0; left: 0;
border-left: 2px solid rgb(54, 56, 55);
border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span::after {
top: 0; right: 0;
border-right: 2px solid rgb(54, 56, 55);
border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span:hover::before,
.btn.hover-border-6 span:hover::after {
width: 50%; height: 96%;
opacity: 1;
transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;
}
/* 17. hover-border-7 */
.btn.hover-border-7::before,
.btn.hover-border-7::after {
bottom: 0;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-7::before {
right: 50%;
}
.btn.hover-border-7::after {
left: 50%;
}
.btn.hover-border-7:hover::before,
.btn.hover-border-7:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-7 span::before,
.btn.hover-border-7 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-7 span::before {
bottom: 0; left: 0;
border-left: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span::after {
bottom: 0; right: 0;
border-right: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span:hover::before,
.btn.hover-border-7 span:hover::after {
width: 50%; height: 96%;
opacity: 1;
transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;
}
/* 18. hover-border-8 */
.btn.hover-border-8::before,
.btn.hover-border-8::after {
bottom: 0;
width: 15%;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-8::before {
right: 50%;
}
.btn.hover-border-8::after {
left: 50%;
}
.btn.hover-border-8:hover::before {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-8:hover::after {
width: 50%;
transition: width 0.1s ease-in;
}
.btn.hover-border-8 span::before,
.btn.hover-border-8 span::after {
width: 0%; height: 0%;
bottom: 0;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-8 span::before {
left: 0%;
border-left: 2px solid rgb(54, 56, 55);
transition: height 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-8 span:hover::before {
height: 96%;
opacity: 1;
transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-8 span::after {
right: 0%;
border-right: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-8 span:hover::after {
width: 99%; height: 96%;
opacity: 1;
transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;
}
/* 19. hover-border-9 */
.btn.hover-border-9::before,
.btn.hover-border-9::after {
bottom: 0;
width: 15%;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-9::before {
right: 50%;
}
.btn.hover-border-9::after {
left: 50%;
}
.btn.hover-border-9:hover::before {
width: 50%;
transition: width 0.1s ease-in;
}
.btn.hover-border-9:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-9 span::before,
.btn.hover-border-9 span::after {
width: 0%; height: 0%;
bottom: 0;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-9 span::after {
right: 0%;
border-right: 2px solid rgb(54, 56, 55);
transition: height 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-9 span:hover::after {
height: 96%;
opacity: 1;
transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-9 span::before {
left: 0%;
border-left: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-9 span:hover::before {
width: 98.5%; height: 96%;
opacity: 1;
transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;
}
/* 20. hover-border-10 */
.btn.hover-border-10::before,
.btn.hover-border-10::after {
left: 0%;
height: 30%;
width: 2px;
transition: height 0.2s 0.35s ease-out;
}
.btn.hover-border-10::before {
top: 50%;
}
.btn.hover-border-10::after {
bottom: 50%;
}
.btn.hover-border-10:hover::before {
height: 50%;
transition: height 0.2s ease-in;
}
.btn.hover-border-10:hover::after {
height: 50%;
transition: height 0.1s ease-in;
}
.btn.hover-border-10 span::before,
.btn.hover-border-10 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-10 span::after {
bottom: 0; left: 0%;
border-bottom: 2px solid rgb(54, 56, 55);
transition: width 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-10 span:hover::after {
width: 100%;
opacity: 1;
transition: width 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-10 span::before {
top: 0%; left: 0%;
border-top: 2px solid rgb(54, 56, 55);
border-right: 2px solid rgb(54, 56, 55);
transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;
}
.btn.hover-border-10 span:hover::before {
width: 98.5%; height: 96%;
opacity: 1;
transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;
}
五、综合
=======================================================================
经过以上四种类型按钮的实验，相信大家已经有了很深的认识，接下来这个按钮，是之前按钮的，一个综合。大家观察观察代码，思考一下实现方式。
运行效果：
btn05.html
hover me
btn05.css
- {
box-sizing: border-box;
margin: 0; padding: 0;
}
/*为方便观察，将按钮元素放于屏幕中间
1.top: 50%;left: 50%;代表可以让div块的左上顶点位于页面正中间
2.transform: translate(-50%, -50%);代表让div块向上向左分别偏移50%，这样刚好使得div块位于正中央。
*/
.btn-holder{
position: absolute ;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn {
position: relative;
display: inline-block;
width: auto; height: auto;
background-color: transparent;
border: none;
cursor: pointer;
margin: 0 auto;
min-width: 100px;
}
.btn span {
position: relative;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
top: 0; left: 0;
width: 100%;
padding: 15px 20px;
transition: 0.3s;
}
::before,
::after {
position: absolute;
content: “”;
}
/— btn-5 —/
.btn-5 span {
color: rgb(28, 31, 30);
border: 2px solid rgb(249, 211, 27);
transition: 0.2s;
}
.btn-5 span:hover {
background-color: rgb(245,245,245);
}
/* 21. hover-border-11 */
.btn.hover-border-11::before,
.btn.hover-border-11::after {
width: 100%; height: 2px;
background-color: rgb(54, 56, 55);
z-index: 2;
transition: 0.35s;
}
.btn.hover-border-11::before {
top: 0; right: 0;
}
.btn.hover-border-11::after {
bottom: 0; left: 0;
}
.btn.hover-border-11:hover::before,
.btn.hover-border-11:hover::after {
width: 0%;
transition: 0.2s 0.2s ease-out;
}
.btn.hover-border-11 span::before,
.btn.hover-border-11 span::after {
width: 2px; height: 100%;
background-color: rgb(54, 56, 55);
z-index: 2;
transition: 0.25s;
}
.btn.hover-border-11 span::before {
bottom: 0; right: -2px;
}
.btn.hover-border-11 span::after {
top: 0; left: -2px;
}
.btn.hover-border-11 span:hover::before,
.btn.hover-border-11 span:hover::after {
height: 0%;
}
六、::before选择器和::after选择器
===========================================================================================
1.伪元素概念
其实从字面意思上理解即可，伪字吗，就是假的意思。伪元素其实就是一个真的存在但又是假的元素，它存在内容，但是它本身并不存在于文档树当中，也没有任何html标签。
2.我们为什么要使用伪元素？
H5之后，增加了很多语义化的元素进来，如nav、hader、footer这种语义化标签，让文档树更为清晰的，也能让样式和内容更好的分离。
而画页面的我们都知道，其实我们写的很多标签都是没有明确的语义的，就只是为了实现某种样式而额外添加的元素。而很多这种需要额外添加元素的实现的样式，恰巧可以利用伪元素装饰内容 (无论是装饰图片还是音效) 而不需要更改 HTML 的内容，从而帮助内容与样式更好地分离。
就像如果仅仅为了画一个装饰用的三角就在 HTML 里多加一个元素，这上对于实际内容来说其实是多余的，对自动分析网页的语义也可能会产生不好的影响。
简而言之：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
3.::before 和 ::after
3.1 ::before
旧写法(:before).
::before,在元素内部的前面插入内容。
CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。另外content属性是必填的属性。
语法：
/* CSS3 语法 */
element::before { 样式 }
/* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */
element:before { 样式 }
/* 在每一个p元素前插入内容 */
p::before { content: “Hello world!”; }
3.2 ::after
::after在元素内部的后面插入内容。
CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
语法:
element:after { style properties } /* CSS2 语法 */
element::after { style properties } /* CSS3 语法 */
3.3 简单实例
我是小丫么小牛马
.box1::before{
content:“大家好呀，”
}
.box1::after{
content:“，感谢观看我的文章”
}
运行效果：
before 和 盒子 和 after 之间的关系大致如下图
注意点
-
如果我们要给这些伪元素设置宽度、高度什么，一定得写上display:inline-block属性，否则不会生效。
-
before和after会创建一个元素，但是创建出来的元素是属于行内元素。
-
另外新创建的元素在文档树中是找不到的
-
before 和 after 必须有content 属性
-
before 在父元素内容前面创建元素，after 在元素内容的后面插入元素
-
伪元素选择器和标签选择器一样，权重为1
七、Absolute（绝对定位）与relative（相对定位）
==================================================================================================
1.要点
1、absolute：绝对定位，相对最近父元素，原有空间不保留会被其他元素挤占。宽度为文本宽度，且宽度不会影响父元素宽度
2、relative：相对定位，相对自身原来位置，原有空间保留，不会被挤占。宽度为父元素宽度，且宽度会撑大/缩小父元素宽度
2.position的属性值及区别
- Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位，如果没有父级元素，就以根节点
- Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
- Relative：相对定位，是相对于其原本的位置来定位的。
- Static：默认值，没有定位。
- Inherit：继承父元素的position值。
区别
Absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。
Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。
3.实例及图解
首先设置4个div：
第一个div 第二个div 第三个div 第四个div自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
前端资料汇总
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。
3.实例及图解
首先设置4个div：
第一个div 第二个div 第三个div 第四个div自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-dsr1aBy2-1712276829573)]
[外链图片转存中…(img-oR6WYl2b-1712276829574)]
[外链图片转存中…(img-PTRgNFVg-1712276829574)]
[外链图片转存中…(img-F4hvEc6k-1712276829575)]
[外链图片转存中…(img-3crjGoR4-1712276829575)]
[外链图片转存中…(img-8h9hWad3-1712276829575)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-EZXaa75Z-1712276829576)]
前端资料汇总
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
