htmlgames

“AI—逐梦之路”网页作品陈述（已完成）

（请用Google浏览器或360浏览器查看网页）

小组成员：曹亚静 刘官明 周雪华 田壮壮
思维导图

一、首页部分
      1.导航栏部分：

      导航栏左侧为团队logo，键盘字母j，是这次队长名字的最后一个字拼音的首字母，同时也是加油和坚持的拼音首字母，象征团队在比赛过程中遇到困难要坚持不懈。
导航栏部分代码使用html和css，导航栏效果部分用了伪类等。效果：鼠标放在AI公司或者AI技术或者AI展望的时候，深灰色阴影部分也会发生移动。
      2.轮播部分：
使用了bootstrap框架。
      3.正文内容部分：
   使用了html+css，分区以及文本格式调整，分别介绍了巨头聚焦人工智能，人工智能历史，人工智能进步催化剂，认知技术四个模块，其中每个模块由标头，上面的图片和下面文字组成，每张图片均有用css实现的白色边框。

      4.footer部分：
   使用了html+css，介绍了团队名称，团队地址，团队队长以及团队成员等相关信息。如下图所示。

二、AI公司部分
      1. 公司简介部分：

由logo和文字介绍两部分组成，简单介绍了一下公司概况
      2. 公司大事件部分：

建立了时间轴，公司大事件一目了然
      3. 产品展示部分：

去除了图片间的间隔，使图片展示更加紧凑，且每个图片均可点击查看
      4. 成员介绍部分：

使用伪类，当鼠标悬停在某个成员上时，介绍内容将更加突出，视觉效果++
三、AI技术部分
      1.导航栏部分：
开场有个动态展现效果，凸显科幻风格，用js和css实现。页面展示如图。
   插入视频，展现人工智能技术的发展现状

   人工智能领域专家介绍，鼠标置于图片上，展现人物详情

人工智能技术成品展示，鼠标置于图片之上展现名称，效果如图。

四、AI展望部分
      1.展望初始部分：
AI展望，所以希望给观者一种未来感震撼感，使用较多的科技风格，比如背景的动态图，导航栏选择与主页一致。效果如下图。

   看到我的网页首先映入眼帘的时一个机器人伸出手，并打印了一行字“未来我们应该和平共处”，在我的观念中，未来机器人会和人类有相同的社会地位，所以如何才能不出现《终结者》中的悲剧就需要我们与机器人和平共处，也希望能给观者灌输这样一个和谐生存的观念。
      2.正文内容部分：
   再往下是六张图片及图片上的文字，在这里实则是6个div，运用到了transition-timing-function（过渡）属性，使得当鼠标移动到上面时会自动向左收回，增加了趣味性和科技感，然后还使用了圆角（用红色矩形框做了标注），使得其更加圆润。如图为缩放前效果。

   再往下是主要叙述的人工智能未来发展的三个趋势，在这个模块我使用了一个盒模型，在这个模块的上面三个蓝色的词即切换按钮，默认显示第一个，使用伪类改变鼠标移动到上面时的颜色和称线出现与消失的效果，至于中间的文本替换则使用到了javaScript中的show和hide来控制三个模块的出现和隐藏。
      3.footer部分：
      最后底部采用了两种黑色，由浅到深，并在其中写明了团队名称，联系方式等信息，用来phone小标志，效果如图。