0%
零基础 H5 移动端修炼
搞懂H5标准,玩转CSS3魔性特性
移动端响应式跨平台开发实战精讲课程,是您踏向 高级工程师的重要基石
课程咨询
不只是原生
课程中包含了Less、Sass等CSS 预处理 和 Bootstrap 的相关知识,不管是框架还是工具我们一次讲齐
跨平台开发
从PC跨域到移动端,课程中包含了PC端、移动端、响应式等各 类项目的讲解,满足工作中的各类场景
零基础入门
课程从零基础入手,哪怕您是没有接触过编程领域也可以听的津津有味
知识点全面
课程中完全按照最近的 H5 和 CSS3 标准给大家讲解,覆盖了目前工作所需的各类知识点
海量实战
不只是知识点的详解剖析,课程中还包含了大量真实的工作案例,实 战结合理论才能帮助大家更快的进步
课程介绍视频
获取课程大纲

1

前端开发概况、代码入门
1.认识前端开发; 2.开发及测试工具的安装及使用; 3.HTML 的基本结构; 4.引入 CSS 的各种方式; 5.来画个框框 - border 详解; 6.常用颜色模式:rgb、rgba、十六进制、关键字;

2

常用样式汇总
1.玩转 background; 2.绝对路径和相对路径; 3.文字设置:加粗、倾斜、大小、行高、字体; 4.行高测量、词间距和字间距; 5.文本设置:颜色、对齐、缩进、强制断行、阴影; 6.border-radius 圆角设置;

3

深入理解盒模型
1.padding 内边距; 2.margin 外边距; 3.margin 的问题及解决方案; 4.盒模型阴影设置; 5.盒模型大小计算; 6.怪异盒模型设置;

4

常用标签和选择器
1.常用标签汇总; 2.H5 标签兼容设置; 3.标签语义化:SEO、SEM; 4.常用选择器:id、class、类选择器、群组选择器、通配符; 5.选择器优先级; 6.超链接设置:跳转、锚点、下载; 7.常用伪类: L-V-H-A; 8.标签的默认样式初始化;

5

标签的类型划分
1.标签类型:块和内嵌(内联、行内)的区分及特性; 2.标签类型转换 - display; 3.inline-block 内联块元素; 4.display-none 隐藏元素 5.cursor 鼠标指针设置;

6

浮动布局实战
1.浮动特性详解; 2.文档流与脱离文档流; 3.浮动实战;

7

定位布局实战
1.relative 相对定位; 2.absolute 绝对定位; 3.fixed 固定定位; 4.static 静态定位; 5.定位层级设置; 6.透明度及滤镜; 7.图片遮罩功能实现;
获取完整课程大纲

1

前端开发概况、代码入门
1.认识前端开发; 2.开发及测试工具的安装及使用; 3.HTML 的基本结构; 4.引入 CSS 的各种方式; 5.来画个框框 - border 详解; 6.常用颜色模式:rgb、rgba、十六进制、关键字;

2

常用样式汇总
1.玩转 background; 2.绝对路径和相对路径; 3.文字设置:加粗、倾斜、大小、行高、字体; 4.行高测量、词间距和字间距; 5.文本设置:颜色、对齐、缩进、强制断行、阴影; 6.border-radius 圆角设置;

3

深入理解盒模型
1.padding 内边距; 2.margin 外边距; 3.margin 的问题及解决方案; 4.盒模型阴影设置; 5.盒模型大小计算; 6.怪异盒模型设置;

4

常用标签和选择器
1.常用标签汇总; 2.H5 标签兼容设置; 3.标签语义化:SEO、SEM; 4.常用选择器:id、class、类选择器、群组选择器、通配符; 5.选择器优先级; 6.超链接设置:跳转、锚点、下载; 7.常用伪类: L-V-H-A; 8.标签的默认样式初始化;

5

标签的类型划分
1.标签类型:块和内嵌(内联、行内)的区分及特性; 2.标签类型转换 - display; 3.inline-block 内联块元素; 4.display-none 隐藏元素 5.cursor 鼠标指针设置;

6

浮动布局实战
1.浮动特性详解; 2.文档流与脱离文档流; 3.浮动实战;

7

定位布局实战
1.relative 相对定位; 2.absolute 绝对定位; 3.fixed 固定定位; 4.static 静态定位; 5.定位层级设置; 6.透明度及滤镜; 7.图片遮罩功能实现;
获取完整课程大纲
  • JQ 官网首页
    之前的课程中我们利用原生的方法自己处理了响应式制作。这个项目主要为大家讲解如果利用Bootstrap 来快速开发一个响应式的项目。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。掌握 Bootstrap 的使用也是我们必须要掌握技能之一。
  • UC 首页搭建
    这是我们的第一个实战项目,项目中涉及了整个页面搭建时的规划,通用样式编写,雪碧图处理,以及一些常见的 JS 特效的结构编写。作为初学者的第一个实战项目,该项目难度适中并且包含全面,特别适合初学者练手
  • 淘宝首页制作
    电商项目,一直是要求比较高的一种布局项目。通过淘宝首页的制作,目的在于帮助我们巩固移动端开发,加深我们对移动端开发的掌握。本次学习除了移动端本身的知识点外,我们还加入的弹性盒模型的使用,并且讲解弹性盒模型在真实项目使用中的兼容处理方法等知识点。
  • 响应式项目实战
    本实战视频以原生方式,向大家展示一套自定义栅格化响应式框架的实现流程及每一步操作细节,极大精简代码、最终变成你自己专属的、灵活的响应式解决方案。此外,视频中配备完整响应式框架源码文件,且附带全程的项目上线操作过程。大家通过学习这个案例,可以按照视频中讲解的方案把项目上传到线上,使之变成一个真实的线上项目作品,更加从容自信的顺利通过面试。
  • 移动端企业站
    本项目从拿到设计图开始,一步步带着大家实践,从一开始的视口设置,到适配方案以及移动端相关的各项问题处理。包含知识点:iconfont 图标处理,vw+rem适配实战,CSS 3 渐变等等。通过该项目的学员可以帮助学员快速掌握移动端布局所需掌握各项注意点,帮助大家更快上手移动端项目。
  • JQ 官网首页
    之前的课程中我们利用原生的方法自己处理了响应式制作。这个项目主要为大家讲解如果利用Bootstrap 来快速开发一个响应式的项目。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。掌握 Bootstrap 的使用也是我们必须要掌握技能之一。
  • UC 首页搭建
    这是我们的第一个实战项目,项目中涉及了整个页面搭建时的规划,通用样式编写,雪碧图处理,以及一些常见的 JS 特效的结构编写。作为初学者的第一个实战项目,该项目难度适中并且包含全面,特别适合初学者练手
  • 淘宝首页制作
    电商项目,一直是要求比较高的一种布局项目。通过淘宝首页的制作,目的在于帮助我们巩固移动端开发,加深我们对移动端开发的掌握。本次学习除了移动端本身的知识点外,我们还加入的弹性盒模型的使用,并且讲解弹性盒模型在真实项目使用中的兼容处理方法等知识点。
  • 响应式项目实战
    本实战以原生方式,向大家展示一套自定义栅格化响应式框架的实现流程及每一步操作细节,极大精简代码、最终变成你自己专属的、灵活的响应式解决方案。此外,视频中配备完整响应式框架源码文件,且附带全程的项目上线操作过程。大家通过学习这个案例,可以按照视频中讲解的方案把项目上传到线上,使之变成一个真实的线上项目作品,更加从容自信的顺利通过面试。
  • 移动端企业站
    本项目从拿到设计图开始,一步步带着大家实践,从一开始的视口设置,到适配方案以及移动端相关的各项问题处理。包含知识点:iconfont 图标处理,vw+rem适配实战,CSS 3 渐变等等。通过该项目的学员可以帮助学员快速掌握移动端布局所需掌握各项注意点,帮助大家更快上手移动端项目。

学前基础

1)熟悉电脑键盘输入、可快速输入25个英文字母
2)可独立下载并安装软件,对“新建文件夹、重命名”等电脑文件操作必须熟练
3)有PS等图片处理软件有使用经验者更佳

课程目标

通过本课程的学习可以让大家具备工作中常见的静态页面开发能力,如:PC 端 企业级静态页面开发、移动端电商静态页面开发、bootstrap 响应式页面开发。初步了解 JavaScript 的边写规范和网页常见特效的编写流程

学习形式

在线直播-直播上课,互动学习氛围强 课程回放-错过直播,回放视频课后随时随地观看,全面吸收技术要点 视频教程-视频教程无死角填充知识点 课后大一-助教1对1课后贴心 辅导 专属班级交流群-班计划氛围式学习交流群,互相交流提升学习效果
线上线下活动
每月举行线下学院活动,活动内容丰富多彩,不限于技术
班级服务
班级有专门为大家服务的班班,基于学员无微不至的关怀。提醒学员上课、提醒学员写作业/完成测试,倾听学员对于学习的建议和意见,尽力帮助大家。
作业批改
本次课程有相关的练习作业,讲师和助教也会对大家的作业进行详细的批改
课程咨询