前端project1-项目经验总结

概览

• 项目简介

• 相关链接

• Part1-网页框架+布局

• Part2-Menu菜单栏

• Part3-两分栏布局

• Part4-画册布局+弹窗

• Part5-动画按钮

• Part6-总结

项目简介：

做前端开发工作以来的第一个完整项目，用以总结记录自己的学习过程，并整理出来，供自己和其它学习者一起学习、共同进步。
需求描述：本项目是为一家按摩院制作一个展示网站，无复杂功能。设计图由设计师提供。

网站主要包含：主页、关于我们页、画册、招聘页、联系我们页。

相关链接：

网站URL：jmtherapy.com.au （网站暂未上线）

Github链接

• 完整链接：
• 画册+弹窗demo：
• 按钮动画demo：

Part1 网页框架

众所周知，网站开发三部曲，HTML、CSS和JAVASCRIPT。

这部分介绍的是如何将设计图解构为可编写的代码。

公司的前端大牛、也是带我的师父，直接教给了我，他的常用套路。

HTML-Body部分如下：

Body通常分为三层。

第一层（最外层）的目的是将整个HTML页面分为三大部分，Header（通常放menu bar）、div class=“wrapper”（放网页主体部分）和footer（顾名思义）

第二层的目的是在三大部分的每一个部分内部，再次分割，该层通常用section/div，并定义能明显区分模块意图的class名称，比如homeHero、homeAbout之类的。

第三层是在第二层的内部&