- 模仿网易云课堂的首页 作者:[email protected]
- 预览地址：点击
-
代码解释（@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 点页面布局动态适应为加分项，有能力的学员可 尝试完成 本作业具体功能要求如下：
点击顶部通知条中的“ X 不再提醒”后，刷新页面不再出现此通知条（使用本地 cookie 实现）。 点击项的 hover 效果见视觉稿
点击关注按钮：首先判断登录的 cookie 是否已设置（ loginSuc） 如果未设置登录 cookie，则弹出登录框，使用给定的用户名和密码（需要表单 验证）调用服务器 Ajax 登录，成功后设置登录 cookie 登录成功后，调用关注 API，并设置关注成功的 cookie（ followSuc） 登录后“关注”按钮变成不可点的“已关注”状态。 按钮的 hover 效果见视觉 稿
点击导航中的“网易公开课”，“网易云课堂”，“中国大学 MOOC”， 新窗口打开对 目的页面，对应的跳转链接如下， 点击项的 hover 效果见视觉稿。点击“了解更多>” 的跳转链接及打开方式相同。
- 网易公开课： http://open.163.com/
- 网易云课堂： http://study.163.com/
- 中国大学 MOOC： http://www.icourse163.org/
三张轮播图轮播效果： 实现每 5s 切换图片，图片循环播放；鼠标悬停某张图片， 则暂停切换；切换效果使用入场图片 500ms 淡入的方式。点击后新开窗口打开目的页 面，对应的跳转链接如下，
- banner1： http://open.163.com/
- banner2： http://study.163.com/
- banner3： http://www.icourse163.org/
点击“产品设计”或“编程语言” tab，实现下方课程内容的更换。 tab 项的 hover 及选中效果见视觉稿， tab 项对应的课程卡片数据见本文档的数据接口列表
鼠标悬停“产品设计”或“编程语言” tab 下的任意课程卡片，出现浮层显示该课 程的课程详情；鼠标离开课程详情浮层，则浮层关闭。课程卡片即详情浮层的效果见视 觉稿，课程卡片及详情数据见本文档的数据接口列表
点击“机构介绍”中的整块图片区域，调用浮层播放介绍视频。 图片的 hover 效果 见视觉稿，浮层中调用的播放器（不做浏览器兼容,可用 html5） 及视频内容接口见本文 档的数据接口列表
实现每次进入或刷新本页面，“热门推荐”模块中， 接口返回 20 门课程数据，默认 展示前 10 门课程，隔 5 秒更新一门课程， 实现滚动更新热门课程的效果。 课程数据接 口见本文档的数据接口列表
根据浏览器窗口宽度，适应两种视觉布局尺寸。窗口宽度<1205 时，使用小屏视觉 布局；窗口宽度>=1205 时，使用大屏视觉布局。布局示意图见视觉效果