neteaseHomework

网易前端

• 模仿网易云课堂的首页 作者:ipengyo@qq.com
• 预览地址：点击

代码说明：

• 代码解释（@SPxiaomin）： https://github.com/SPxiaomin/neteaseCloudClassroom-learn

• cssReset，以及css规范命名参考 网易前端NEC

• 重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！

• 统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等统一设置处理的样式！

• 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！

• 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！

• 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！

• 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！

• 皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！

• 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），具体详见命名规则的扩展相关项。

功能说明：

• 课程卡片鼠标移过去，在窗口尺寸大于1205时，显示4个卡片，最后2个的详情卡片是向左边的，在窗口尺寸小于等于1205时，显示3个卡片，最后一个详情卡片是向左边的，其他的都是默认向右边。

主要功能点

所有学员必须完成静态页制做， 下面的第 9 点页面布局动态适应为加分项，有能力的学员可 尝试完成 本作业具体功能要求如下：

1. 关闭顶部通知条

点击顶部通知条中的“ X 不再提醒”后，刷新页面不再出现此通知条（使用本地 cookie 实现）。 点击项的 hover 效果见视觉稿

2. 关注“网易教育产品部” /登录

 点击关注按钮：首先判断登录的 cookie 是否已设置（ loginSuc）  如果未设置登录 cookie，则弹出登录框，使用给定的用户名和密码（需要表单 验证）调用服务器 Ajax 登录，成功后设置登录 cookie  登录成功后，调用关注 API，并设置关注成功的 cookie（ followSuc）  登录后“关注”按钮变成不可点的“已关注”状态。 按钮的 hover 效果见视觉 稿

3. 顶部右侧导航及内容区各产品的“了解更多”

点击导航中的“网易公开课”，“网易云课堂”，“中国大学 MOOC”， 新窗口打开对 目的页面，对应的跳转链接如下， 点击项的 hover 效果见视觉稿。点击“了解更多>” 的跳转链接及打开方式相同。

• 网易公开课： http://open.163.com/
• 网易云课堂： http://study.163.com/
• 中国大学 MOOC： http://www.icourse163.org/

4. 轮播图

三张轮播图轮播效果： 实现每 5s 切换图片，图片循环播放；鼠标悬停某张图片， 则暂停切换；切换效果使用入场图片 500ms 淡入的方式。点击后新开窗口打开目的页 面，对应的跳转链接如下，

• banner1： http://open.163.com/
• banner2： http://study.163.com/
• banner3： http://www.icourse163.org/

5. 左侧内容区 tab 切换

点击“产品设计”或“编程语言” tab，实现下方课程内容的更换。 tab 项的 hover 及选中效果见视觉稿， tab 项对应的课程卡片数据见本文档的数据接口列表

6. 查看课程详情

鼠标悬停“产品设计”或“编程语言” tab 下的任意课程卡片，出现浮层显示该课 程的课程详情；鼠标离开课程详情浮层，则浮层关闭。课程卡片即详情浮层的效果见视 觉稿，课程卡片及详情数据见本文档的数据接口列表

7. 右侧“机构介绍”中的视频介绍

点击“机构介绍”中的整块图片区域，调用浮层播放介绍视频。 图片的 hover 效果 见视觉稿，浮层中调用的播放器（不做浏览器兼容,可用 html5） 及视频内容接口见本文 档的数据接口列表

8. 右侧“热门推荐”

实现每次进入或刷新本页面，“热门推荐”模块中， 接口返回 20 门课程数据，默认 展示前 10 门课程，隔 5 秒更新一门课程， 实现滚动更新热门课程的效果。 课程数据接 口见本文档的数据接口列表

9. 页面布局动态适应(加分项)

根据浏览器窗口宽度，适应两种视觉布局尺寸。窗口宽度<1205 时，使用小屏视觉 布局；窗口宽度>=1205 时，使用大屏视觉布局。布局示意图见视觉效果

网易云课堂