您现在的位置是:课程
零基础学前端全栈系列课程 HTML/CSS/SCSS/JavaScript 入门到精通
2023-07-03 15:23课程 人已围观
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:所有课程采用硬件绑定式,一机一码观看