首页技术文章正文

Web前端HTML5+CSS3+移动Web全套【黑马程序员最新课程】

更新时间:2021-07-14 来源:黑马程序员 浏览量:


教程简介 :
本教程由浅入深的为你讲解前端网页开发的每个技术要点,每天都以综合案例的形式,让你学以致用,不断验证自己的成长进步。最终从零开始还原企业中制作网页的实际开发流程,让你能水到渠成的完成【互联网大厂】企业级项目的开发实战,最终达成 Zero to Hero 的强势蜕变。


更多章节>>



适用人群

  1.对前端开发感兴趣的在校生及应届毕业生。

  2.对目前职业有进一步提升要求,希望从事前端行业高薪工作的在职人员。

  3.对前端行业感兴趣的相关人员。

 

教程目录

     一、HTML 01-认知

  1. HTML的基本语法

  2. HTML的排版标签

  3. 绝对路径和相对路径

  4. HTML的多媒体标签

  5. HTML的链接标签

  6. 案例:招聘案例、今日热词案例

       二、HTML 02-基础

  1. HTML的列表标签

  2. HTML的表格标签

  3. HTML的表单系列标签

  4. HTML的语义化布局标签

  5. HTML的字符实体

  6.案例:学生信息表格案例、会员注册表单案例

       三、CSS 01-基础选择器+字体文本样式

  1. CSS的引入方式

  2. CSS的标签、类、ID、通配符选择器

  3. CSS的字体相关样式

  4. CSS的文本相关样式

  5. CSS的水平居中技巧

  6. Chrome调试工具的使用

  7. 案例:新闻网页案例、卡片居中案例

       四、CSS 02-选择器进阶+背景相关属性+元素显示模式+三大特性

  1. CSS的后代、子代、并集、交集选择器

  2. emmet基本语法

  3. hover伪类选择器

  4. CSS的背景相关属性

  5. 三种常见的元素显示模式

  6. CSS三大特性:继承性

  7. CSS三大特性:层叠性

  8. 案例:五彩导航案例

       五、CSS 03-盒子模型

  1. CSS三大特性:优先级

  2. CSS的权重叠加计算方法

  3. 盒子模型的组成部分

  4. 盒子模型的边框、内边距、外边距的作用和代码实现

  5. 外边距折叠现象

  6. 案例:新浪导航案例、网页新闻列表案例

       六、CSS 04-浮动

  1. CSS的结构伪类选择器

  2. 伪元素的基本使用

  3. 标准流的排布规则

  4. 浮动的特点和使用

  5. 清除浮动的常见方法

  6. 案例:小米布局案例、网页导航案例

       七、CSS 05-定位+装饰

  1. 定位的特点和使用

  2. 垂直对齐方式

  3. 边框圆角完成正圆和胶囊按钮效果

  4. 元素显示隐藏切换效果

  5. CSS完成三角形效果

  6. CSS的链接伪类选择器

  7. CSS的焦点伪类选择器

  8. CSS的属性选择器

  9. 案例:卡片模块hot图标案例、导航二维码居中定位案例

       八、小兔鲜 01-项目前置样式+项目搭建

  1. 精灵图的使用

  2. CSS的背景图片大小属性

  3. 文字和文本阴影效果

  4. SEO三大标签

  5. 项目结构搭建和基础公共样式

  6. 实战:实现 「小兔鲜儿项目」 header模块开发

       九、小兔鲜02-header+footer+主体内容

  1. 实战:实现 「小兔鲜儿项目」 header模块开发

  2. 实战:实现 「小兔鲜儿项目」 网站入口xtx-entry模块开发

  3. 实战:实现 「小兔鲜儿项目」 新鲜好物面板xtx-new-goods模块开发

       十、CSS3高级

  1. 平面转换

  2. 空间转换

  3. 动画

       十一、 Flex布局模型

  1. Flex布局模型的使用

  2. 项目:小兔鲜儿-移动端

  3. 项目:小兔鲜儿-PC端

       十二、移动端网页适配方案

  1. Rem基本使用

  2. Rem + 媒体查询适配

  3. Rem + flexible适配

  4. Rem适配原理

  5. 项目:游乐园

  6. vw/vh基本使用

  7. vw/vh适配原理

  8. 项目:B站

       十三、响应式

  1. 媒体查询基本使用

  2. 媒体查询实现响应式网页效果

  3. Bootstrap框架基本使用

  4. Bootstrap框架栅格系统

  5. 项目:腾讯全端

 

适用人群

  1.对前端开发感兴趣的在校生及应届毕业生。

  2.对目前职业有进一步提升要求,希望从事前端行业高薪工作的在职人员。

  3.对前端行业感兴趣的相关人员。

 

教程目录

       一、HTML 01-认知

  1. HTML的基本语法

  2. HTML的排版标签

  3. 绝对路径和相对路径

  4. HTML的多媒体标签

  5. HTML的链接标签

  6. 案例:招聘案例、今日热词案例

       二、HTML 02-基础

  1. HTML的列表标签

  2. HTML的表格标签

  3. HTML的表单系列标签

  4. HTML的语义化布局标签

  5. HTML的字符实体

  6.案例:学生信息表格案例、会员注册表单案例

       三、CSS 01-基础选择器+字体文本样式

  1. CSS的引入方式

  2. CSS的标签、类、ID、通配符选择器

  3. CSS的字体相关样式

  4. CSS的文本相关样式

  5. CSS的水平居中技巧

  6. Chrome调试工具的使用

  7. 案例:新闻网页案例、卡片居中案例

       四、CSS 02-选择器进阶+背景相关属性+元素显示模式+三大特性

  1. CSS的后代、子代、并集、交集选择器

  2. emmet基本语法

  3. hover伪类选择器

  4. CSS的背景相关属性

  5. 三种常见的元素显示模式

  6. CSS三大特性:继承性

  7. CSS三大特性:层叠性

  8. 案例:五彩导航案例

       五、CSS 03-盒子模型

  1. CSS三大特性:优先级

  2. CSS的权重叠加计算方法

  3. 盒子模型的组成部分

  4. 盒子模型的边框、内边距、外边距的作用和代码实现

  5. 外边距折叠现象

  6. 案例:新浪导航案例、网页新闻列表案例

       六、CSS 04-浮动

  1. CSS的结构伪类选择器

  2. 伪元素的基本使用

  3. 标准流的排布规则

  4. 浮动的特点和使用

  5. 清除浮动的常见方法

  6. 案例:小米布局案例、网页导航案例

       七、CSS 05-定位+装饰

  1. 定位的特点和使用

  2. 垂直对齐方式

  3. 边框圆角完成正圆和胶囊按钮效果

  4. 元素显示隐藏切换效果

  5. CSS完成三角形效果

  6. CSS的链接伪类选择器

  7. CSS的焦点伪类选择器

  8. CSS的属性选择器

  9. 案例:卡片模块hot图标案例、导航二维码居中定位案例

       八、小兔鲜 01-项目前置样式+项目搭建

  1. 精灵图的使用

  2. CSS的背景图片大小属性

  3. 文字和文本阴影效果

  4. SEO三大标签

  5. 项目结构搭建和基础公共样式

  6. 实战:实现 「小兔鲜儿项目」 header模块开发

       九、小兔鲜02-header+footer+主体内容

  1. 实战:实现 「小兔鲜儿项目」 header模块开发

  2. 实战:实现 「小兔鲜儿项目」 网站入口xtx-entry模块开发

  3. 实战:实现 「小兔鲜儿项目」 新鲜好物面板xtx-new-goods模块开发

       十、CSS3高级

  1. 平面转换

  2. 空间转换

  3. 动画

       十一、 Flex布局模型

  1. Flex布局模型的使用

  2. 项目:小兔鲜儿-移动端

  3. 项目:小兔鲜儿-PC端

       十二、移动端网页适配方案

  1. Rem基本使用

  2. Rem + 媒体查询适配

  3. Rem + flexible适配

  4. Rem适配原理

  5. 项目:游乐园

  6. vw/vh基本使用

  7. vw/vh适配原理

  8. 项目:B站

       十三、响应式

  1. 媒体查询基本使用

  2. 媒体查询实现响应式网页效果

  3. Bootstrap框架基本使用

  4. Bootstrap框架栅格系统

  5. 项目:腾讯全端

更多前端开发视频教程>>






猜你喜欢:

黑马程序员web前端视频教程:HTML5+CSS3教程下载

为什么要进行HTML语义化?语义化有哪些注意事项?

HTML5的离线存储怎么使用,工作原理是什么?

黑马程序员前端高级软件工程师培训

分享到:
在线咨询 我要报名
和我们在线交谈!