2024年Web前端期末大作业---HTML+CSS+JS实现的翻纸牌记忆游戏，web前端面试知识点有哪些

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

主要代码实现：

---

CSS样式：

@import url(“https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900&display=swap”);

• {

box-sizing: border-box;

padding: 0;

margin: 0;

}

body {

min-height: 100vh;

color: hsl(340, 5%, 20%);

background: url(‘data:image/svg+xml;utf8, ’), hsl(340, 10%, 5%);

font-family: “Noto Sans JP”, sans-serif;

font-weight: 400;

padding: 100px 0 0 0;

}

main.svelte-185gx00 {

margin: 1rem auto;

width: 90vw;

max-width: 700px;

display: grid;

grid-template-columns: repeat(auto-fit, 140px);

grid-auto-rows: max-content;

grid-gap: 1rem;

justify-content: center

}

div.svelte-1nxkdr7 {

position: fixed;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

z-index: 5;

background: hsla(0, 0%, 10%, 0.5);

backdrop-filter: blur(1px)

}

section.svelte-1nxkdr7 {

padding: 3rem 3.5rem;

background: url(‘data:image/svg+xml;utf8, ’), url(‘data:image/svg+xml;utf8, ’), hsl(0, 0%, 100%);

background-size: 30%;

background-position: 0% 100%, 100% 100%;

background-repeat: no-repeat;

text-align: center;

border: 0.75rem solid hsl(340, 70%, 50%);

border-radius: 15px;

box-shadow: 0 2px 10px -5px hsla(0, 0%, 0%, 0.2)

}

h1.svelte-1nxkdr7 {

text-transform: uppercase;

margin-bottom: 1.25rem;

font-weight: 800

}

button.svelte-1nxkdr7 {

font-weight: 800;

padding: 1.25rem 1.5rem;

border: none;

color: inherit;

background: url(‘data:image/svg+xml;utf8, ’), url(‘data:image/svg+xml;utf8, ’), url(‘data:image/svg+xml;utf8, ’), url(‘data:image/svg+xml;utf8, ’);

background-size: 2rem;

background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;

background-repeat: no-repeat;

font-family: inherit;

font-size: 1.1rem;

text-transform: uppercase;

letter-spacing: 0.05rem

}

article.svelte-1m66100 {

position: relative;

padding: 2rem;

border-radius: 20px;

width: 140px;

height: 165px;

transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);

transform: perspective(800px) rotateY(0deg);

transform-style: preserve-3d

}

.flip.svelte-1m66100 {

transform: perspective(800px) rotateY(180deg)

}

.paired.svelte-1m66100 {

animation: svelte-1m66100-pair 0.25s 1s ease-in-out 2 alternate

}

@keyframes svelte-1m66100-pair {

25% {

transform: rotateZ(-5deg)

}

75% {

transform: rotateZ(5deg)

}

}

.face.svelte-1m66100,

button.svelte-1m66100 {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: inherit

}

button.svelte-1m66100 {

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-SH49jf6i-1715471876626)]