课程试听
第一章 CSS基础
1-1 CSS介绍和CSS基本选择器
- 01-CSS层叠样式表导读
- 02-CSS简介
- 03-体验CSS语法规范
- 04-CSS代码风格
- 05-CSS选择器的作用
- 06-标签选择器
- 07-类选择器
- 08-使用类选择器画盒子
- 09-类选择器特殊使用-多类名
- 10-id选择器
- 11-通配符选择器
1-2 font字体
- 12-font-family设置字体系列
- 13-font-size字号大小
- 14-font-weight字体粗细
- 15-font-style字体样式
- 16-font复合属性写法
- 17-字体属性总结
1-3 文本样式和CSS样式表
- 18-文本颜色color
- 19-文本对齐text-align
- 20-文本装饰text-decoration
- 21-文本缩进text-indent
- 22-行间距line-height
- 23-CSS文本属性总结
- 24-内部样式表
- 25-行内样式表
- 26-外部样式表
- 27-CSS引入方式总结
1-4 综合案例【新闻页面】
- 28-综合案例-新闻页面
- 29-综合案例-修改样式(一)
- 30-综合案例-修改样式(二)
- 31-综合案例-修改样式(三)
1-5 chrome调试工具和emmet语法
- 32-chrome调试工具使用
- 01-CSS第二天导读
- 02-emmet语法生成html标签
- 03-emmet语法快速生成css样式
- 04-快速格式化代码
1-6 CSS复合选择器
- 05-复合选择器简介
- 06-后代选择器
- 07-子元素选择器
- 08-课堂练习
- 09-并集选择器
- 10-链接伪类选择器(上)
- 11-链接伪类选择器(下)
- 12-focus伪类选择器
- 13-复合选择器总结
1-7 元素显示模式和案例
- 14-什么是元素显示模式
- 15-块元素
- 16-行内元素
- 17-行内块元素
- 18-元素显示模式总结
- 19-显示模式的转换
- 20-一个小工具snipaste的使用
- 21-简洁版小米侧边栏案例
- 22-单行文字垂直居中的原理
1-8 CSS背景及应用案例
- 23-背景颜色
- 24-背景图片
- 25-背景平铺
- 26-背景位置-方位名词
- 27-背景位置案例一
- 28-背景位置案例二-王者荣耀背景图片
- 29-背景位置-精确单位
- 30-背景位置-混合单位
- 31-背景固定
- 32-背景属性复合写法
- 33-背景颜色半透明
- 34-背景总结
1-9 综合案例【五彩导航】
- 35-综合案例-五彩导航(上)
- 36-综合案例-五彩导航(二)
1-10 CSS三大特性
- 01-CSS三大特性之层叠性
- 02-CSS三大特性之继承性
- 03-行高的继承
- 04-CSS三大特性之优先级
- 05-优先级注意的问题
- 06-CSS权重的叠加
- 07-权重两个练习题
1-11 CSS盒模型及应用案例
- 08-盒子模型导读
- 09-看透网页布局本质
- 10-盒子模型组成部分
- 11-盒子模型边框border
- 12-边框的复合写法
- 13-表格细线边框
- 14-边框会影响盒子实际大小
- 15-盒子模型内边距padding
- 16-padding复合属性
- 17-padding会影响盒子实际大小
- 18-padding应用-新浪导航栏(上)
- 19-padding应用-新浪导航栏(下)
- 20-小米侧边栏修改
- 21-padding不会撑开盒子的情况
- 22-盒子模型外边距margin
- 23-外边距典型应用-块级盒子水平居中对齐
- 24-行内元素和行内块元素水平居中
- 25-外边距合并-相邻块元素垂直外边距
- 26-外边距合并-嵌套块元素塌陷
- 27-清除内外边距
1-12 PS基本操作及综合案例
- 28-ps的基本操作
- 29-综合案例-产品模块布局分析
- 30-综合案例-box布局
- 31-综合案例-图片和段落制作
- 32-综合案例-评价和详情制作
- 33-综合案例-竖线细节制作
- 34-pink老师解惑
1-13 综合案例【快报模块】
- 01-综合案例-快报模块布局分析
- 02-综合案例-快报模块头部制作
- 03-综合案例-快报模块列表制作
1-14 圆角和阴影的应用
- 04-圆角边框原理
- 05-圆角边框的使用
- 06-盒子阴影
- 07-文字阴影
第二章 CSS进阶
2-1 浮动及应用案例
- 08-浮动导读
- 09-传统网页布局三种方式
- 10-为什么需要浮动
- 11-什么是浮动
- 12-浮动特性-脱标
- 13-浮动特性-浮动元素一行显示
- 14-浮动特性-浮动元素具有行内块特性
- 15-浮动元素经常搭配标准流的父元素
- 16-浮动布局练习1
- 17-浮动布局练习2
- 18-浮动练习-手机模块(上)
- 19-浮动练习-手机模块(下)
- 20-常见的网页布局
- 21-浮动的两个注意点
2-2 清除浮动
- 22-为什么清除浮动
- 23-清除浮动本质以及额外标签法
- 24-清除浮动之父元素overflow
- 25-清除浮动之after伪元素
- 26-清除浮动之双伪元素
- 27-清除浮动
2-3 PS常用操作及cutterman插件使用
- 01-常见的图片格式
- 02-ps切图-图层切图(上)
- 03-ps切图-图层切图(下)
- 04-ps切图-切片工具
- 05-ps切图-cutterman安装
- 06-ps切图-cutterman使用技巧
2-4 学成网在线项目
- 07-学成在线案例准备工作
- 08-CSS属性书写顺序(重要)
- 09-页面布局整体思路
- 10-学成在线-header区域制作
- 11-学成在线-logo区域制作
- 12-学成在线-导航栏nav区域制作(上)
- 13-学成在线-导航栏nav区域制作(中)
- 14-学成在线-导航栏nav区域制作(下)
- 15-学成在线-搜索search模块input制作
- 16-学成在线-搜索search模块button制作
- 17-学成在线-用户user模块制作
- 18-学成在线-banner模块制作
- 19-学成在线-subnav模块制作（上）
- 20-学成在线-subnav模块制作（下）
- 21-学成在线-course模块制作（上）
- 22-学成在线-course模块制作（中）
- 23-学成在线-course模块制作（下）
- 24-学成在线-精品推荐模块（上）
- 25-学成在线-精品推荐模块（中）
- 26-学成在线-精品推荐模块（下）
- 27-学成在线-box-hd模块制作
- 28-学成在线-box-bd模块制作
- 29-学成在线-box模块完成
- 30-学成在线-footer模块制作
- 31-学成在线-copyright模块制作
- 32-学成在线-links模块制作
2-5 CSS四种定位
- 01-定位导读
- 02-为什么需要定位
- 03-定位组成
- 04-相对定位
- 05-绝对定位-没有父级或者父级无定位情况
- 06-绝对定位-父级有定位情况
- 07-绝对定位脱标的不占有原来位置
- 08-子绝父相的由来
- 09-子绝父相案例-hot模块
- 10-固定定位
- 11-固定定位小技巧-固定到版心右侧
- 12-粘性定位（了解）
- 13-定位总结
- 14-定位的叠放顺序
- 15-绝对定位的盒子居中算法
- 16-定位的特殊特性
- 17-浮动元素不会压住标准流的文字定位会
2-6 淘宝焦点图案例
- 18-淘宝焦点图布局分析
- 19-淘宝焦点图-大盒子制作
- 20-淘宝焦点图-左侧箭头按钮制作
- 21-淘宝焦点图-右侧箭头按钮制作
- 22-淘宝焦点图-ul盒子模块制作
- 23-淘宝焦点图-li小圆点模块制作
- 24-网页布局总结
2-7 元素显示和隐藏应用案例
- 25-display显示隐藏元素
- 26-visibility显示隐藏元素
- 27-overflow溢出显示隐藏
- 28-土豆案例（上）
- 29-土豆案例（下）
2-8 CSS精灵图和字体图标
- 01-CSS高级技巧导读
- 02-为什么需要精灵技术
- 03-精灵图使用（原理）
- 04-精灵图使用（代码）
- 05-精灵图案例-拼出自己名字
- 06-字体图标产生和优点
- 07-字体图标下载
- 08-字体图标的使用
- 09-字体图标的追加和加载原理
- 10-CSS三角的做法
- 11-CSS三角应用-京东效果
2-9 CSS进阶【问题解决技巧】
- 12-用户界面-鼠标样式
- 13-用户界面-取消表单轮廓和防止拖拽文本域
- 14-vertical-align实现行内块和文字垂直居中对齐
- 15-图片底侧空白缝隙解决方案
- 16-单行文字溢出省略号显示
- 17-多行文字溢出省略号显示
2-10 CSS进阶【布局技巧】
- 18-布局技巧-margin负值巧妙运用（上）
- 19-布局技巧-margin负值巧妙运用（下）
- 20-布局技巧-文字围绕浮动元素巧妙运用
- 21-布局技巧-行内块的巧妙运用
- 22-布局技巧-CSS三角巧妙运用（上）
- 23-布局技巧-CSS三角巧妙运用（下）
- 24-CSS初始化