Web前端--HTML+CSS+JavaScript酷炫游戏动漫网页设计_html+css+javascript网页设计(2)

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

                <li class="lang"><a class="active">中</a>|<a href="en_index.html">EN</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
        <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
        <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
        <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
        <div class="swiper-slide" style="background-image:url(img/banner.png)"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
</div>
<!--多图轮播-->
<div class="lunbo">
    <div class="title wow bounceInUp">我们参与的项目</div>
    <div class="picScroll">
        <ul>
            <li>
                <a target="_blank" href="###">
							<img _src="img/lunbo1.png" src="img/lunbo1.png" />
							<div class="img-text">大型海战战场“潜龙之渊”上线，全民开战！</div>
						</a>
            </li>
            <li>
                <a target="_blank" href="###">
							<img _src="img/lunbo2.png" src="img/lunbo2.png" />
							<div class="img-text">天刀嘲天宫《一人之战》视频首发 同名专辑上架QQ音乐</div>
						</a>
            </li>
            <li>
                <a target="_blank" href="###"><img _src="img/lunbo3.png" src="img/lunbo3.png" />
							<div class="img-text">懒人攻略 如何刷完一周胜负令</div>
						</a>
            </li>
            <li>
                <a target="_blank" href="###"><img _src="img/lunbo4.png" src="img/lunbo4.png" />
							<div class="img-text">《王者荣耀》魔性H5上线，五军对决等你来战</div>
						</a>
            </li>
            <li>
                <a target="_blank" href="###"><img _src="img/lunbo5.png" src="img/lunbo5.png" />
							<div class="img-text">超高期待！玩家Coser作品获《绝地求生 全军出击》官方点赞</div>
						</a>
            </li>
            <li>
                <a target="_blank" href="###"><img _src="img/lunbo6.png" src="img/lunbo6.png" />
							<div class="img-text">揭幕战RNGvsIG LPL春季赛1月15日正式开赛</div>
						</a>
            </li>
        </ul>
        <a class="prev" href="javascript:void(0)"></a>
        <a class="next" href="javascript:void(0)"></a>
    </div>
    <a href="###">
        <div class="more">更多作品</div>
    </a>
</div>
<!--关于我们-->
<div class="aboutUs">
    <div class="wrap">
        <div class="title wow bounceInUp">关于我们</div>
        <div class="text wow slideInDown">
            <span class="ccf0f32">广州袁动动漫设计有限公司（YD ART），致力于CG美术概念设计及三维影视游戏视觉开发制作</span>
            <span>其团队现由创办人袁杰联合著名CG艺术家肖壮悦以及XRCGTEAM（<a href="http://www.xrcgteam.com">http://www.xrcgteam.com</a>）成员和各游戏、影视、动漫业内资深艺术家所组成，</span>
            <span>为国内外众多项目提供优质概念设计、原画设定、美宣插画、次世代3D、GUI、动作特效等外包服务。</span>
            <span>曾参与《星际争霸》《上古卷轴》《英雄联盟》《战神》《三国无双》《梦幻西游》《LOC》《鬼吹灯》《长城》等国内外大型游戏影视项目视觉美术开发制作</span>
        </div>
        <
            <ul>
                <li>
                    <a href="###">角色原画设计</a>
                    <a href="###">场景原画设计</a>
                    <a href="###">UI设计</a>
                </li>
                <li>
                    <a href="###">肖像绘制</a>
                    <a href="###">道具绘制</a>
                    <a href="###">图标绘制</a>
                </li>
                <li>
                    <a href="###">美宣</a>
                    <a href="###">卡牌绘制</a>
                    <a href="###">2D场景整合</a>
                </li>
                <li>
                    <a href="###">3DMAX角色模型</a>
                    <a href="###">3DMAX场景模型</a>
                    <a href="###">次世代模型、贴图</a>
                </li>
                <li>
                    <a href="###">3DMAX动画</a>
                    <a href="###">3DMAX特效</a>
                    <a href="###">3转2绘制</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--footer-->


<style>
    .copyrights {
        text-indent: -9999px;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
</style>

 **主页css**

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
color: #cf0f32;
background: none;
}

.navbar-default .navbar-nav>li>a:hover {
color: #cf0f32;
}

.navbar-nav>li>a {
line-height: 80px;
}

.navbar-default .navbar-nav>li>a {
color: #000;
}

.nav>li>a {
padding: 10px 12px;
display: inline-block;
}

.navbar-default .navbar-nav>li.lang {
margin-left: 20px;
}

javascript实现图片轮播：

//多图轮播
jQuery(“.picScroll”).slide({
mainCell: “ul”,
effect: “leftLoop”,
vis: 6,
scroll: 1,
autoPage: true,
switchLoad: “_src”,
autoPlay: true
});

//banner轮播
var swiper = new Swiper('.swiper-container', {
    spaceBetween: 30,
    //	      effect: 'fade',
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

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

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。