web总报告2

四、资讯页制作

1、主要结构

2、层次分析

1.navbar和footer

Navbar和footer与焦点页设置相同，后面的也是，除了个别修改了颜色，之后这两部分内容不多做描述。

2.全屏背景图片

分析：

整个页面布局用了3处mask，将navbar、section1、section2分开，使整个布局显得更有层次感不拥挤。

3.Section1

分析：

Section1 部分由标题和三个段落组成，这部分主要亮点是标题跑马灯效果和整体实现360度旋转。
最终效果：

问题改进和总结：

1、跑马灯问题：关键在于如何使标题实现循环动画和不让标题溢出标题框，animation: scrollf 12s linear infinite;用来实现无限循环动画，又将box里的overflow设置为hidden，让标题不溢出标题框。
2、360度按中心点旋转问题：主要是将这里transition-property设置为all，这样才能实现整体的360度旋转。

4.Section2

分析：

Section2分为上下两处，上为标题和导语，下为图片和文字，这个部分是参考MDB的feature文档，难度不大，在这里的创新是自己用transform等属性加入了一个上下滑动效果，基于之前360度旋转问题的解决，在这里运用起来更加得心应手。
最终效果：

5.Section3

分析：

这部分代码相对简单，利用MDB直接用三张图片布局，让网站链接显得不那么单调。
最终效果：

五、“大陆”页制作

1、主要结构

2、层次分析

1、section1

分析：

这部分实现3D图，基本的框架不难，一个无序列表放图片，另一个无序列表设置图片轮播图标。主要难点在于用js实现3D轮播效果。
最终效果：

问题总结：

在用js技术时有许多的小问题，在网上查询了许多资料，举其中一例说明：
创建定时器的方法包括两种：setTimeout和setInterval。首先它们接收的参数相同：第一个参数是一个函数，用于定时器执行，第二个参数是一个数字，代表过多少毫秒之后定时器执行函数。它们的不同在于：setTimeout 是在经过指定的时间之后，只执行一次函数，而setInterval，则是每间隔指定时间，就执行函数一次，说简单点的话，就是setInterval是setTimeout的循环版。由于最开始没搞清楚两者的区别，出现一些小问题，后面修改使用的是setInterval，

2、Section2

分析：

这部分内容主要亮点在于对盒子颜色和尺寸的设置，使整体更加美观。
最终效果：

3、Section3

分析：

这部分内容样式简单，没什么难度。主要是靠MDB的网格布局。
最终效果：

六、“天空”页制作

1、主要结构

2、层次分析

1.full page intro

分析：

这部分实现的是全屏视频背景，直接参考MDB文档。这块有两部分组成：视频；遮罩和弹性盒子。
最终效果：

2.Section1

分析：

这部分是对网格的灵活使用即可。
最终效果：

3.Section2

分析：
Section2主要是一组卡片将图和文字一起展示，主要难点在于如何利用网格系统进行布局。
最终效果：

七、“海洋”页制作

1、主要结构

2、层次分析

1.section1

分析：

这部分主要是靠对justify-content属性灵活应用，将内容布局错落有致，显得更加美观大方。
最终效果：

2.Section2

分析：

内容相对简单，主要是在其中加入一组图片。
最终效果：

3.Section3

分析：

参考MDB里的卡片布局。
最终效果：

八、心得体会

其实通过前面的问题总结分析就可以看出这次我学到不少东西，可能对很多东西理解还是不够透彻或者没有掌握熟练，但是每个页面的制作都让我学会很多新的知识，并且也有很大的成就感。在整个学习过程中，我觉得最大的收货可能是自我学习能力的提升吧，在没有老师授课的情况下，自我学习反而让我对学习有了更深的认知。这次页面制作还是有很多欠缺的地方，这就是我在课程结束后要去多多攻克的难关。