学会掌握:
适合人群:
- 第1章: HTML/CSS基础[01.必要基础]
- 1.1:请加入本课程学习社群
- 1.2:【很重要】
- 1.3:如果您实际开发的场景与教程中的场景不一样,出现问题,可以免费申请教程补录,完全免费,扫码加群,联系客服即可
- 1.4:什么是HTML&CSS
- 1.5:VS Code的下载与安装
- 1.6:初始化、语义化HTML、第一个HTML页面
- 1.7:常用HTML标签概览
- 1.8:初识CSS与引用的方法
- 1.9:CSS基础语法与选择器 [1]
- 1.10:CSS基础语法与选择器 [2]
- 1.11:CSS继承
- 1.12:CSS权重
- 1.13:盒子模型
- 1.14:CSS块级元素[block]与行内元素[inline]
- 1.15:浮动[Float]
- 1.16:绝对定位[position]
- 1.17:背景[background]
- 1.18:文字方向[text-align]
- 1.19:总结
- 第2章: HTML/CSS基础[02.基础切图]
- 2.1:初始化CSS
- 2.2:head之LOGO的实现
- 2.3:head之菜单的实现
- 2.4:HTML与CSS书写规范
- 2.5:banner图的实现
- 2.6:首页标题块[index-title]
- 2.7:nth-child简介
- 2.8:首页第一个块[1]布局与nth-child应用
- 2.9:首页第一个块[2]background-position的应用
- 2.10:首页第一个块[3]ul与li标签的应用
- 2.11:首页第一个块[4]list-style-image的应用
- 2.12:首页通用按钮的制作
- 2.13:首页第二个块[1]background与background-size
- 2.14:首页第三个块-代码重用初识
- 2.15:首页第四个块的完成
- 2.16:初识border-radius
- 2.17:border-radius的应用
- 2.18:overflow的认识
- 2.19:box-shadow的初识
- 2.20:box-shadow的应用
- 2.21:swiper插件的初识与应用
- 2.22:字体图标的使用方法
- 2.23:全局右侧tool小工具的实现 [1]
- 2.24:全局右侧tool小工具的实现 [2]
- 2.25:小技巧-到页面任何位置
- 2.26:伪类hover进阶 - 下拉菜单 [1]
- 2.27:伪类hover进阶 - 下拉菜单 [2]
- 第3章: HTML/CSS进阶[01]企业站&PC&移动
- 3.1:摘要
- 3.2:初始化代码
- 3.3:首页head [1] 引入swiper
- 3.4:首页head [2] swiper指示器的修改
- 3.5:首页head [3] 幻灯片完成
- 3.6:首页head [4] nav菜单制作完成
- 3.7:首页head [5] text-shadow文字阴影的应用
- 3.8:首页info块 [1]
- 3.9:首页info块 [2] nth-child逻辑问题剖析
- 3.10:首页公用标题title
- 3.11:JQuery懒加载插件[lazyload]的使用
- 3.12:首页News新闻块的布局
- 3.13:首页News块完成 [超出几行显示省略号功能实现]
- 3.14:首页1-3[1]布局
- 3.15:首页1-3[2]布局块left完成 透明背景的应用
- 3.16:首页1-3[3]布局块right完成
- 3.17:首页多栏新闻块完成 CSS代码的重用
- 3.18:首页案例块[1]布局
- 3.19:首页案例块[2]swiper应用
- 3.20:首页案例2的完成
- 3.21:footer完成
- 3.22:基于Jq的下拉菜单 [1]
- 3.23:基于Jq的下拉菜单 [2]
- 3.24:新闻列表页的实现 [1]
- 3.25:新闻列表页的完成 [2]
- 3.26:图片列表的完成 代码Copy
- 3.27:作业布置
- 3.28:本地环境搭建与手机访问电脑本地网站
- 3.29:手机访问电脑网页自动跳转至移动端网页
- 3.30:初始化CSS与引用font.css
- 3.31:尾部菜单的完成
- 3.32:head-logo块的完成
- 3.33:swiper插件的引用与调试
- 3.34:二级菜单的设计与制作 [1]
- 3.35:二级菜单的设计与制作 [2] 美化二级菜单
- 3.36:首页新闻列表的制作
- 3.37:图片懒加载的应用
- 3.38:仿APP左滑动过渡效果的应用
- 3.39:服务页面的搭建与left-loading的优化
- 3.40:服务页面的完成与[课后作业]
- 3.41:transition过渡属性的使用
- 3.42:CSS3预设动画库Animate的使用
- 3.43:总结
- 第4章: HTML/CSS进阶[02]大型门户站&PC&移动
- 4.1:简介
- 4.2:全局初始化
- 4.3:top块 [1] 布局
- 4.4:top块 [2] 细节完成
- 4.5:logo块的完成
- 4.6:一级菜单的制作完成
- 4.7:二级菜单 [1] 布局
- 4.8:二级菜单 [2] 完成
- 4.9:首页顶部广告的完成
- 4.10:首页第一个块 [1] 布局
- 4.11:首页第一个块 [1] 左块 [1]
- 4.12:首页第一个块 [1] 左块 [2]
- 4.13:首页第一个块 [2] 中块 [1] 幻灯片组件
- 4.14:首页第一个块 [2] 中块 [2] 幻灯片组件调整完成
- 4.15:首页第一个块 [3] 右块 完成
- 4.16:首页第二个块 [1] 布局
- 4.17:首页第二个块 [2] 左块广告处
- 4.18:首页第二个块 [3] 左块完成
- 4.19:首页第二个块 [4] 中块顶部标题
- 4.20:首页第二个块 [5] 中块下部文章列表
- 4.21:首页第二个块 [6] 重新加一个布局
- 4.22:首页第二个块 [7] 填充一个新的块
- 4.23:首页第二个块 [8] 全部完成
- 4.24:首页第二个广告块的完成
- 4.25:首页for通用块 [1] 布局
- 4.26:首页for通用块 [2] 左侧幻灯片的实现
- 4.27:首页for通用块 [3] 大标题的实现
- 4.28:首页for通用块 [4] 中栏上半部分
- 4.29:首页for通用块 [5] 中栏的完成
- 4.30:首页for通用块 [6] 全部完成
- 4.31:首页第三个广告块的完成
- 4.32:SuperSlide插件的学习与使用
- 4.33:首页TAB切换卡 块 [1] 大标题的完成
- 4.34:首页TAB切换卡 块 [2] 基础内容与样式的实现
- 4.35:首页TAB切换卡 块 [3] 基于SuperSlide插件的切换卡实现
- 4.36:首页复杂块 [1] 标题与布局
- 4.37:首页复杂块 [2] 左侧幻灯片的完成
- 4.38:首页复杂块 [3] 左侧全部完成
- 4.39:首页复杂块 [4] 中间块的布局
- 4.40:首页复杂块 [5] 中间块的全部完成
- 4.41:首页复杂块 [6] 右侧块 TAB 切换卡 [1]
- 4.42:首页复杂块 [7] 右侧块 TAB 切换卡 [2]
- 4.43:首页复杂块 [8] 右侧块 TAB 切换卡 [3] 完成
- 4.44:首页复杂块 [9] 全部完成
- 4.45:首页 不规则图片布局 [1] 左侧布局完成
- 4.46:首页 不规则图片布局 [2] 右侧布局完成
- 4.47:首页 友情链接的完成
- 4.48:全局 尾部footer [1] 上半部分
- 4.49:全局 尾部footer [2] 全部完成
- 4.50:HTML&CSS代码压缩
- 4.51:PC端首页的总结
- 4.52:移动端-初始化代码
- 4.53:移动端-全局尾部菜单 [完成]
- 4.54:移动端-最顶部导航的完成 [完成]
- 4.55:移动端-首页幻灯片的完成 [完成]
- 4.56:移动端-首页二级菜单 [完成] [1]
- 4.57:移动端-首页二级菜单 [完成] [2]
- 4.58:移动端-首页三级菜单 [完成]
- 4.59:移动端-首页列表标题 [完成]
- 4.60:移动端-首页列表 [1] 出现问题 [小思考]
- 4.61:移动端-首页列表 [2] 第一种解决方法
- 4.62:移动端-首页列表 [3] 第二种解决方法CSS函数calc的使用
- 4.63:移动端-页面补齐
- 4.64:移动端-overflow-auto的应用
- 4.65:结尾
- 4.66:小技巧[1]外部CSS与JS不缓存
- 第5章: HTML5/CSS3常用的新特性
- 5.1:摘要简介
- 5.2:媒体查询 [1] 外链样式(max-width)
- 5.3:媒体查询 [2] 外链样式(min-width)
- 5.4:媒体查询 [3] 页内写法
- 5.5:媒体查询 [4] 当页面大于x小于x时应用的css
- 5.6:媒体查询 [5] 简单的实战
- 5.7:CSS选择器的知识扩展
- 5.8:CSS3动画 [1] 旋转
- 5.9:CSS3动画 [2] 变形
- 5.10:CSS3动画 [3] 缩放
- 5.11:CSS3动画 [4] 位移
- 5.12:CSS3动画 [5] 矩阵
- 5.13:CSS3动画 [6] 中心点
- 5.14:CSS3动画 [1] 入门及使用方法
- 5.15:CSS3动画 [2] 各个属性分开写
- 5.16:CSS3动画 dome 剖析 [1] 从右至左的滑动效果
- 5.17:CSS3动画 dome 剖析 [2] 炫酷背景效果
- 5.18:Flex弹性布局 - 初识
- 5.19:Flex弹性布局-父元素[1]flex-direction属性
- 5.20:Flex弹性布局-父元素[2]flex-wrap属性
- 5.21:Flex弹性布局-父元素[3]justify-content属性
- 5.22:Flex弹性布局-父元素[4]align-items属性
- 5.23:Flex弹性布局-父元素[5]align-content属性
- 5.24:Flex弹性布局-子元素[1]order属性
- 5.25:Flex弹性布局-子元素[2]flex-grow属性
- 5.26:Flex弹性布局-子元素[3]align-self属性
- 5.27:Grid网格布局 - 简介
- 5.28:Grid网格布局 - 概念
- 5.29:Grid网格布局 - [1] 申明为Grid网格布局
- 5.30:Grid网格布局 - [2] 行与列的申明
- 5.31:Grid网格布局 - [3] 容器属性[repeat]auto-fill函数申明
- 5.32:Grid网格布局 - [4] 容器属性fr单位
- 5.33:Grid网格布局 - [5] 容器属性minmax
- 5.34:Grid网格布局 - [6] 容器属性auto
- 5.35:Grid网格布局 - [7] 容器属性grid-gap
- 5.36:Grid网格布局 - [8] 容器属性grid-auto-flow
- 5.37:Grid网格布局 - [9] 容器属性justify-items
- 5.38:Grid网格布局 - [10] 容器属性justify-content
- 5.39:[完]
- 第6章: Sass & 最强大的专业级CSS扩展语言 & CSS预处理
- 6.1:Scss课程介绍
- 6.2:[1]什么是sass
- 6.3:[2]sass和scss的区别
- 6.4:[3]sass的强大之处演示
- 6.5:[1]如何在VSCode中使用sass[添加插件live Sass Compiler]
- 6.6:[2]如何在VSCode中使用sass[配置插件]
- 6.7:sass常用功能[1]sass中的注释
- 6.8:sass常用功能[2]利用嵌套提升编码效率
- 6.9:sass常用功能[3]如何在嵌套中查找父选择器
- 6.10:sass常用功能[4]属性如何嵌套
- 6.11:sass常用功能[5]利用变量提升维护效率
- 6.12:sass常用功能[6]sass中的运算[1]减加乘
- 6.13:sass常用功能[6]sass中的运算[2]除法运算
- 6.14:sass常用功能[6]sass中的运算[3]变量运算
- 6.15:sass常用功能[6]sass中的运算[4]字符串运算
- 6.16:sass常用功能[7]灵活的差值语句
- 6.17:sass常用功能[8]利用@import实现模块化开发[1]结构拆分以及样式书写
- 6.18:sass常用功能[8]利用@import实现模块化开发[2]利用@import引入
- 6.19:sass常用功能[9]如何只编译指定的scss文件
- 6.20:sass常用功能[10]sass中的继承(@extend)
- 6.21:sass常用功能[11]占位选择器
- 6.22:sass常用功能[12]sass中的混合(@mixin)[1]混合的简单使用
- 6.23:sass常用功能[12]sass中的混合(@mixin)[2]带有默认值的参数以及多个参数
- 6.24:sass常用功能[12]sass中的混合(@mixin)[3]这部分内容更改的解释
- 6.25:sass常用功能[13]sass中的if判断(@if)[1]@if
- 6.26:sass常用功能[13]sass中的if判断(@if)[2]@else if
- 6.27:sass常用功能[14]sass中的for循环(@for)[1]through
- 6.28:sass常用功能[14]sass中的for循环(@for)[2]to
- 6.29:sass常用功能[15]sass中的@each
- 6.30:sass常用功能[16]sass中的函数
- 6.31:sass常用功能[17]一个小例子
- 6.32:课程总结
该讲师的其它课程
讲师介绍
学员提问
-
鲸鱼2021-08-10
-
吴立涛2020-10-20
-
李海洋2020-08-12
-
YYY2020-02-28
-
莫湘兆2020-02-17
-
龙起2020-02-17
-
小小2020-01-02