neteaseCloudClassroom

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #typescript #llm #go #golang #android #machine-learning #deep-learning #linux #awesome #mcp

neteaseCloudClassroom

(★ 76)

网易云课堂首页模仿：1.纯手写css 2.原生js加兼容，并封装了一个util库,3.没有使用任何的库，适合新手学习原生js

neteaseCloudClassroom 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# neteaseHomework

## 网易前端
* 模仿网易云课堂的首页  作者:ipengyo@qq.com
* 预览地址：[点击](http://7xpkx2.com1.z0.glb.clouddn.com/)

### 代码说明：

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

* cssReset，以及css规范命名参考 [网易前端NEC](http://nec.netease.com/)
* 重置（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 时，使用大屏视觉布局。布局示意图见视觉效果

> [网易云课堂](http://study.163.com/)

neteaseCloudClassroom

neteaseCloudClassroom 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

neteaseCloudClassroom

neteaseCloudClassroom 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README