您现在的位置是:课程

零基础学前端全栈系列课程 HTML/CSS/SCSS/JavaScript 入门到精通

2023-07-03 15:23课程 人已围观

课程大纲 HTML/CSS系列 - 225小节

01.HTML-CSS基础[01.必要基础]

01.什么是HTML&CSS

02.VS Code

03.初始化、语义化HTML、第一个HTML页面

04.常用HTML标签概览

05.初识CSS与引用的方法

06.CSS基础语法与选择器 [1]

06.CSS基础语法与选择器 [2]

07.CSS继承

08.CSS权重

09.盒子模型

10.CSS块级元素[block]与行内元素[inline]

11.浮动[Float]

12.绝对定位[position]

13.背景[background]

14.文字方向[text-align]

15.总结

02.HTML-CSS基础[02.基础切图]

01.初始化CSS

02.head之LOGO的实现

02.head之菜单的实现

03.HTML与CSS书写规范

04.banner图的实现

05.首页标题块[index-title]

06.nth-child简介

07.首页第一个块[1]布局与nth-child应用

07.首页第一个块[2]background-position的应用

07.首页第一个块[3]ul与li标签的应用

07.首页第一个块[4]list-style-image的应用

08.首页通用按钮的制作

09.首页第二个块[1]background与background-size

10.首页第三个块-代码重用初识

11.首页第四个块的完成

12.初识border-radius

13.border-radius的应用

14.overflow的认识

15.box-shadow的初识

16.box-shadow的应用

17.swiper插件的初识与应用

18.字体图标的使用方法

19.全局右侧tool小工具的实现 [1]

19.全局右侧tool小工具的实现 [2]

20.小技巧-到页面任何位置

21.下拉菜单 [1]

22.下拉菜单 [2]

03.HTML-CSS进阶[01]企业站&PC&移动

00.摘要

01.初始化代码

02.首页head [1] 引入swiper

02.首页head [2] swiper指示器的修改

02.首页head [3] 幻灯片完成

02.首页head [4] nav菜单制作完成

02.首页head [5] text-shadow文字阴影的应用

03.首页info块 [1]

03.首页info块 [2] nth-child逻辑问题剖析

04.首页公用标题title

05.JQuery懒加载插件[lazyload]的使用

06.首页News新闻块的布局

07.首页News块完成 [超出几行显示省略号功能实现]

08.首页1-3[1]布局

08.首页1-3[2]布局块left完成 透明背景的应用

08.首页1-3[3]布局块right完成

09.首页多栏新闻块完成 CSS代码的重用

10.首页案例块[1]布局

10.首页案例块[2]swiper应用

11.首页案例2的完成

12.footer完成

13.基于Jq的下拉菜单 [1]

13.基于Jq的下拉菜单 [2]

14.新闻列表页的实现 [1]

14.新闻列表页的完成 [2]

15.图片列表的完成 代码Copy

16.作业布置

17.本地环境搭建与手机访问电脑本地网站

18.手机访问电脑网页自动跳转至移动端网页

19.初始化CSS与引用font.css

20.尾部菜单的完成

21.head-logo块的完成

22.swiper插件的引用与调试

23.二级菜单的设计与制作 [1]

23.二级菜单的设计与制作 [2] 美化二级菜单

24.首页新闻列表的制作

25.懒加载的应用

26.仿APP左滑动过渡效果的应用

27.服务页面的搭建与left-loading的优化

28.服务页面的完成与[课后作业]

29.transition过渡属性的使用

30.CSS3预设动画库Animate的使用

31.总结

03.HTML-CSS进阶[02]大型门户站&PC&移动

01.简介

02.全局初始化

03.top块 [1] 布局

03.top块 [2] 细节完成

04.logo块的完成

05.一级菜单的制作完成

06.二级菜单 [1] 布局

06.二级菜单 [2] 完成

07.首页顶部广告的完成

08.首页第一个块 [1] 布局

08.首页第一个块 [1] 左块 [1]

08.首页第一个块 [1] 左块 [2]

08.首页第一个块 [2] 中块 [1] 幻灯片组件

08.首页第一个块 [2] 中块 [2] 幻灯片组件调整完成

08.首页第一个块 [3] 右块 完成

09.首页第二个块 [1] 布局

09.首页第二个块 [2] 左块广告处

09.首页第二个块 [3] 左块完成

09.首页第二个块 [4] 中块顶部标题

09.首页第二个块 [5] 中块下部文章列表

09.首页第二个块 [6] 重新加一个布局

09.首页第二个块 [7] 填充一个新的块

09.首页第二个块 [8] 全部完成

10.首页第二个广告块的完成

11.首页for通用块 [1] 布局

11.首页for通用块 [2] 左侧幻灯片的实现

11.首页for通用块 [3] 大标题的实现

11.首页for通用块 [4] 中栏上半部分

11.首页for通用块 [5] 中栏的完成

11.首页for通用块 [6] 全部完成

12.首页第三个广告块的完成

13.SuperSlide插件的学习与使用

14.首页TAB切换卡 块 [1] 大标题的完成

14.首页TAB切换卡 块 [2] 基础内容与样式的实现

14.首页TAB切换卡 块 [3] 基于SuperSlide插件的切换卡实现

15.首页复杂块 [1] 标题与布局

15.首页复杂块 [2] 左侧幻灯片的完成

15.首页复杂块 [3] 左侧全部完成

15.首页复杂块 [4] 中间块的布局

15.首页复杂块 [5] 中间块的全部完成

15.首页复杂块 [6] 右侧块 TAB 切换卡 [1]

15.首页复杂块 [7] 右侧块 TAB 切换卡 [2]

15.首页复杂块 [8] 右侧块 TAB 切换卡 [3] 完成

15.首页复杂块 [9] 全部完成

16.首页 不规则图片布局 [1] 左侧布局完成

16.首页 不规则图片布局 [2] 右侧布局完成

17.首页 友情链接的完成

18.全局 尾部footer [1] 上半部分

18.全局 尾部footer [2] 全部完成

19.HTML&CSS代码压缩

20.PC端首页的总结

21.移动端-初始化代码

22.移动端-全局尾部菜单 [完成]

23.移动端-最顶部导航的完成 [完成]

24.移动端-首页幻灯片的完成 [完成]

25.移动端-首页二级菜单 [完成] [1]

25.移动端-首页二级菜单 [完成] [2]

26.移动端-首页三级菜单 [完成]

27.移动端-首页列表标题 [完成]

28.移动端-首页列表 [1] 出现问题 [小思考]

28.移动端-首页列表 [2] 第一种解决方法

28.移动端-首页列表 [3] 第二种解决方法CSS函数calc的使用

29.移动端-页面补齐

30.移动端-overflow-auto的应用

31.结尾

32.外部CSS与JS不缓存

04.HTML5&CSS3常用的新特性

01.摘要简介

02.媒体查询 [1] 外链样式(max-width)

02.媒体查询 [2] 外链样式(min-width)

02.媒体查询 [3] 页内写法

02.媒体查询 [4] 当页面大于x小于x时应用的css

02.媒体查询 [5] 简单的实战

03.CSS选择器的知识扩展

04.CSS3动画 [1] 旋转

04.CSS3动画 [2] 变形

04.CSS3动画 [3] 缩放

04.CSS3动画 [4] 位移

04.CSS3动画 [5] 矩阵

04.CSS3动画 [6] 中心点

05.CSS3动画 [1] 入门及使用方法

05.CSS3动画 [2] 各个属性分开写

06.CSS3动画 dome 剖析 [1] 从右至左的滑动效果

06.CSS3动画 dome 剖析 [2] 炫酷背景效果

07.Flex弹性布局 - 初识

07.Flex弹性布局-父元素[1]flex-direction属性

07.Flex弹性布局-父元素[2]flex-wrap属性

07.Flex弹性布局-父元素[3]justify-content属性

07.Flex弹性布局-父元素[4]align-items属性

07.Flex弹性布局-父元素[5]align-content属性

07.Flex弹性布局-子元素[1]order属性

07.Flex弹性布局-子元素[2]flex-grow属性

07.Flex弹性布局-子元素[3]align-self属性

08.Grid网格布局 - 简介

09.Grid网格布局 - 概念

10.Grid网格布局 - [1] 申明为Grid网格布局

10.Grid网格布局 - [2] 行与列的申明

10.Grid网格布局 - [3] 容器属性[repeat]auto-fill函数申明

10.Grid网格布局 - [4] 容器属性fr单位

10.Grid网格布局 - [5] 容器属性minmax

10.Grid网格布局 - [6] 容器属性auto

10.Grid网格布局 - [7] 容器属性grid-gap

10.Grid网格布局 - [8] 容器属性grid-auto-flow

10.Grid网格布局 - [9] 容器属性justify-items

10.Grid网格布局 - [10] 容器属性justify-content

11.[完]

SCSS - 32小节

1.Scss课程介绍

2.[1]什么是sass

2.[2]sass和scss的区别

2.[3]sass的强大之处演示

3.[1]如何在VSCode中使用sass[添加插件live Sass Compiler]

3.[2]如何在VSCode中使用sass[配置插件]

4.sass常用功能[1]sass中的注释

4.sass常用功能[2]利用嵌套提升编码效率

4.sass常用功能[3]如何在嵌套中查找父选择器

4.sass常用功能[4]属性如何嵌套

4.sass常用功能[5]利用变量提升维护效率

4.sass常用功能[6]sass中的运算[1]减加乘

4.sass常用功能[6]sass中的运算[2]除法运算

4.sass常用功能[6]sass中的运算[3]变量运算

4.sass常用功能[6]sass中的运算[4]字符串运算

4.sass常用功能[7]灵活的差值语句

4.sass常用功能[8]利用@import实现模块化开发[1]结构拆分以及样式书写

4.sass常用功能[8]利用@import实现模块化开发[2]利用@import引入

4.sass常用功能[9]如何只编译指定的scss文件

4.sass常用功能[10]sass中的继承(@extend)

4.sass常用功能[11]占位选择器

4.sass常用功能[12]sass中的混合(@mixin)[1]混合的简单使用

4.sass常用功能[12]sass中的混合(@mixin)[2]带有默认值的参数以及多个参数

4.sass常用功能[12]sass中的混合(@mixin)[3]这部分内容更改的解释

4.sass常用功能[13]sass中的if判断(@if)[1]@if

4.sass常用功能[13]sass中的if判断(@if)[2]@else if

4.sass常用功能[14]sass中的for循环(@for)[1]through

4.sass常用功能[14]sass中的for循环(@for)[2]to

4.sass常用功能[15]sass中的@each

4.sass常用功能[16]sass中的函数

4.sass常用功能[17]一个小例子

5.课程总结

JavaScript - 165小节
 

1. 课程安排

1. 课程安排

2. 认识 JavaScript

1. JavaScript能做什么

2. 怎么使用JavaScript

3. 尝试使用 JavaScript

1. 第一步:拿到一个 HTML 元素

2. 第二步:认识控制台

3. 第三步:获取以及修改这个 HTML 元素的内容

4. 第四步:获取以及操作这个 HTML 元素的属性

5. 第五步:写点注释吧

6. 作业安排

7. 作业讲解

4. 深入学习 ECMAScript

什么是ECMAScript

【变量详解】1. 声明变量、初始化变量

【变量详解】2. 全局变量、局部变量、 变量的类型

【变量详解】3. 命名规则、命名方式

【数据类型】1. 认识常用数据类型

【数据类型】2. typeof 判断数据类型

【数据类型】3. 原始值和引用值详解

【运算】1. 数学运算符、赋值运算符

【运算】2. 等性运算符、 关系运算符

【运算】3. 逻辑运算符

先来认识一下隐式类型转换

【流程控制】1. 流程控制概念

【流程控制】2. if else

【流程控制】3. switch

【流程控制】4. 三元表达式

【流程控制】5. while、do while

【流程控制】6. for

【流程控制】7. Break、Continue

【流程控制】8. 作业安排

【流程控制】9. 作业讲解

【Function 精讲】1. 简单的函数定义与调用

【Function 精讲】2. 函数的另外几种形式(上)

【Function 精讲】3. 函数的另外几种形式(下)

【Function 精讲】4. 函数的形式参数、实际参数

【Function 精讲】5. 函数的实参列表 arguments

【Function 精讲】6. 函数的返回值 return

【Function 精讲】7. 作业安排

【Function 精讲】8. 作业讲解

【String 精讲】1. 字符串的创建、拼接、length

【String 精讲】2. String 的常用方法(上)

【String 精讲】3. String 的常用方法(中)

【String 精讲】4. String 的常用方法(下)

【String 精讲】5. 作业安排

【String 精讲】6. 作业讲解

【Number 精讲】1. 创建数字

【Number 精讲】2. NaN、Infinity、-Infinity

【Number 精讲】3. 数字常用属性

【Number 精讲】4. Number 的常用方法(上)

【Number 精讲】5. Number 的常用方法(下)

【Number 精讲】6. 全局对象下 Number 相关的方法(上)

【Number 精讲】7. 全局对象下 Number 相关的方法(下)

【Number 精讲】8. 作业安排

【Number 精讲】9. 作业讲解

【Array 精讲】1. 重新认识数组(上)

【Array 精讲】2. 重新认识数组(下)

【Array 精讲】3. 数组的常用方法 isArray()、concat()

【Array 精讲】4. 数组的常用方法 push()、pop()

【Array 精讲】5. 数组的常用方法 unshift()、shift()

【Array 精讲】6. 数组的常用方法 join()、reverse()

【Array 精讲】7. 数组的常用方法 sort()

【Array 精讲】8. 数组的常用方法 slice()、splice()

【Array 精讲】9. 数组的常用方法 indexOf()、lastIndexOf()

【Array 精讲】10. 数组的常用方法 every()、some()、filter()

【Array 精讲】11. 数组的常用方法 forEach()、map()

【Array 精讲】12. 数组的常用方法 reduce()、reduceRight()

【Array 精讲】13. 作业安排

【Array 精讲】14. 作业讲解

【Object 精讲】1. 创建对象

【Object 精讲】2. 访问修改对象属性、方法

【Object 精讲】3. for in 遍历对象

【Object 精讲】4. 作业安排

【Object 精讲】5. 作业讲解

【RegExp 精讲】1. 创建正则表达式

【RegExp 精讲】2. 修饰符

【RegExp 精讲】3. 字符类别

【RegExp 精讲】4. 字符集合

【RegExp 精讲】5. 边界

【RegExp 精讲】6. 数量词

【RegExp 精讲】7. 分组与反向引用

【RegExp 精讲】8. 零宽断言

【RegExp 精讲】9. 正则常用属性

【RegExp 精讲】10. 正则常用方法

【RegExp 精讲】11. 配合正则的字符串方法

【RegExp 精讲】12. 作业安排

【RegExp 精讲】13. 作业讲解

【Date 精讲】1. new Date()、 getTime()

【Date 精讲】2. 获取具体时间

【Date 精讲】3. 设置具体时间

【Math 精讲】1. Math 概述.html

【Math 精讲】2. Math 常用方法(上)

【Math 精讲】3. Math 常用方法(中)

【Math 精讲】4. Math 常用方法(下)

【强制类型转换】1. 强制类型转换(上)

【强制类型转换】2. 强制类型转换(中)

【强制类型转换】3. 强制类型转换(下)

【强制类型转换】4. 作业安排

5. 深入学习 HTML DOM

什么是 HTML DOM

【玩转 DOM】1. 玩转 DOM(一)

【玩转 DOM】2. 玩转 DOM(二)

【玩转 DOM】3. 玩转 DOM(三)

【玩转 DOM】4. 玩转 DOM(四)

【玩转 DOM】5. 玩转 DOM(五)

【玩转 DOM】6. 玩转 DOM(六)

【玩转 DOM】7. 玩转 DOM(七)

【玩转 DOM】8. 玩转 DOM(八)

【DOM 常用属性】1. className、id、style

【DOM 常用属性】2. attributes

【DOM 常用属性】3. classList

【DOM 常用属性】4. innerHTML、innerText

【DOM 常用属性】5. nodeType、nodeValue、nodeName

【DOM 常用属性】6. parentNode、parentElement、childNodes、children

【DOM 常用属性】7. firstChild、firstElementChild、lastChild、lastElementChild

【DOM 常用属性】8. nextSibling、nextElementSibling、previousSibling、previousElementSibling

【DOM 常用属性】9. clientWidth、 scrollWidth、offsetWidth

【DOM 常用属性】10. clientLeft、scrollLeft、offsetLeft

【DOM 常用属性】11. offsetParent

【DOM 常用方法】1. getAttribute()、getAttributeNode()

【DOM 常用方法】2. setAttribute()、setAttributeNode()、createAttribute()

【DOM 常用方法】3. removeAttribute()、removeAttributeNode()、hasAttribute()、hasAttributes()

【DOM 常用方法】4. getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()

【DOM 常用方法】5. querySelector()、querySelectorAll()

【DOM 常用方法】6. createElement()、createTextNode()、appendChild()

【DOM 常用方法】7. removeChild()、replaceChild()、insertBefore()、hasChildNodes()

【DOM 常用方法】8. focus()、hasFocus()

【DOM 事件】1. onclick、ondblclick、oncontextmenu

【DOM 事件】2. onmousedown、onmouseup、onmousemove

【DOM 事件】3. onmouseenter、onmouseleave、onmouseover、onmouseover

【DOM 事件】4. onfocus、onblur、onselect

【DOM 事件】5. onchange、oninput、onsearch

【DOM 事件】6. onreset、onsubmit

【DOM 事件】7. onscroll、onresize.html

【DOM 事件】8. onload

【DOM 事件监听】1. addEventListener()、removeEventListener()

【DOM 事件监听】2. 事件冒泡、事件捕获详解

【DOM 事件监听】3. 阻止事件传递 stopPropagation()

【Event 对象】1. 常用属性

【Event 对象】2. 常用方法

代办事项-作业安排

代办事项-作业讲解(一)

代办事项-作业讲解(二)

代办事项-作业讲解(三)

6. 深入学习 BOM

1. 什么是 BOM

2. window 相关

3. location 相关

4. 认识 Cookie

5. 设置 Cookie

6. 删除、修改 Cookie

7. setInterval()、clearInterval()

8. setTimeout()、clearTimeout()

9.0 作业安排-简单的轮播图

9.1 作业安排-简单的轮播图(一)

9.2 作业安排-简单的轮播图(二)

9.3 作业安排-简单的轮播图(三)

最后啰嗦几分钟

7. Demo深度剖析

1. 方便、实用的可配置轮播图插件-效果演示

2. 方便、实用的可配置轮播图插件-代码编写(一)

3. 方便、实用的可配置轮播图插件-代码编写(二)

4. 方便、实用的可配置轮播图插件-代码编写(三)

5. 方便、实用的可配置轮播图插件-代码编写(四)

6. 方便、实用的可配置轮播图插件-代码编写(五)

7. 方便、实用的可配置轮播图插件-代码编写(六)

7. 方便、实用的可配置轮播图插件-代码编写(七)


所有课程均提供高清下载,下载地址,请加群索取。
ps:所有课程采用硬件绑定式,一机一码观看
-->

站点信息

  • 文章统计篇文章