课程试听
正在播放
1-1 CSS使用介绍
  • CSS是网页的美容师 免费试学
  • CSS 初识 免费试学
  • CSS体验语法规则 免费试学
  • 语法补充及其常见错误 免费试学
1-2 font字体
  • font-size字号设置 免费试学
  • font-family字体设置 免费试学
  • Unicode字体 免费试学
  • font-weight字体加粗 免费试学
  • font-style字体风格 免费试学
  • font连写综合设定 免费试学
1-3 chrome开发者工具介绍
  • chrome开发者工具 免费试学
1-4 选择器使用介绍
  • 标签选择器 免费试学
  • 体验类选择器 免费试学
  • 类选择器练习Google案例 免费试学
  • 类选择器常见错误及其命名规范 免费试学
  • 多类名选择器(1) 免费试学
  • 多类名选择器(2) 免费试学
  • 体验ID选择器 免费试学
  • 类选择器和id选择器区别 免费试学
  • 通配符选择器 免费试学
1-5 CSS注释
  • CSS注释 免费试学
1-6 CSS外观属性
  • color颜色三种格式 免费试学
  • line-height行高 免费试学
  • 文字居中和首行缩进 免费试学
1-7 HTML标签语义化
  • 标签的语义化(理论) 免费试学
1-8 综合案例
  • 综合案例(一) 免费试学
  • 综合案例(二) 免费试学
1-9 CSS选择器
  • 交集选择器 免费试学
  • 并集选择器 免费试学
  • 后代选择器 免费试学
  • 子元素选择器 免费试学
  • 复合选择器测试题 免费试学
1-10 块级和行内元素
  • 体验块级元素 免费试学
  • 体验行内元素 免费试学
  • 行内元素和和块级元素区别 免费试学
  • 体验行内块元素 免费试学
  • 三种显示模式转换 免费试学
  • 链接伪类 免费试学
1-11 伪类和伪元素
  • 元素伪类和focus
  • 了解伪元素
  • 简单导航小案例
1-12 行高
  • 玩转行高(二)行高单位
  • 玩转行高(一)
1-13 CSS样式表
  • 行内样式表
  • 内部样式表
  • 外部样式表
  • 样式表总结
  • 导入式样式表
1-14 CSS三大特性
  • CSS权重特殊性
  • CSS继承性
  • CSS层叠性
1-15 CSS权重练习
  • a和h标题特殊性
  • 6个经典权重练习题
1-16 背景图的介绍和使用
  • 背景图片及其平铺
  • 背景位置
  • 背景简写
  • 购物车案例
  • 背景附着(背景固定)
  • 英雄联盟背景做法
1-17 网页布局本质
  • 看透网页布局的本质
1-18 盒模型
  • 认识盒子模型
  • 体会边框
1-19 表单和表格
  • 表单边框清零
  • 细线表格
1-20 轮廓线
  • 轮廓线
1-21 active和focus的区别
  • 链接的active和focus的区别
1-22 边框和内边距
  • 边框详解分写
  • padding的使用
  • 新浪导航
1-23 外边距
  • 让盒子居中对齐的原理
  • 清除内外边距
  • 外边距合并问题
1-24 盒模型练习题
  • 盒子宽度以及简单计算题
  • 中等数学题
  • 计算题
1-25 搜索趣图案例
  • 综合案例(搜索趣图)案例分析
  • 综合案例(搜索趣图)(一)
  • 综合案例(搜索趣图)(二)
  • 综合案例(搜索趣图)(三)
1-26 盒子模型布局
  • 盒子模型布局稳定性
1-27 普通流
  • 普通流的定义
1-28 浮动使用介绍
  • 体会浮动
  • 浮动的由来和方向
  • 浮动特性之包裹性
  • 浮动特性之对齐
  • 浮动特性之多个盒子一行显示需都浮动
  • 浮动特性之脱标性
  • 浮动特性之模式转换
  • 浮动特性之显示位置
  • 浮动总结--浮漏特
1-29 版心和布局流程详解
  • 一列固定宽度切居中
  • 版心和布局流程
  • 左窄右宽型
  • 通栏平均分布型
1-30 尚合网站整体部署
  • 尚合网站准备工作
1-31 尚合网站logo和search
  • logo和search结束
  • logo和search实体化
1-32 尚合网站nav
  • nav开始
  • nav部分文字
  • nav背景结束
1-33 尚合网站公告部分
  • 公告部分开始
  • 公告部分结束
1-34 尚合网站页面主体
  • 页面主体三个盒子完成
  • 页面主体部分h4公共部分完成
  • 页面主体部分完成
  • 页面主体新闻中心模块完成
1-35 尚合网站页面底部
  • 页面底部开始
  • 页面底部完成
1-36 清除浮动
  • 为什么清除浮动
  • 清除浮动其实更应该叫闭合浮动
  • 清除浮动的本质
  • 清除浮动之额外标签法
  • 父级添加overflow清除浮动
  • after伪元素
  • 利用after伪元素清除浮动
  • after伪元素空余字符法
  • 双伪元素清除浮动
1-37 定位介绍
  • 元素定位属性
  • 为什么要用定位
1-38 静态定位
  • 静态定位
1-39 相对和绝对定位
  • 相对定位详解
  • 父级没有定位子级以浏览器可视区对齐
  • 父级有定位则以父级对齐
  • 绝对定位不添加边偏移
  • 子绝父相的由来
1-40 定位练习
  • 定位练习
  • 尚合网站添加定位
  • 定位的盒子水平居中垂直居中
1-41 小米轮播图定位案例
  • 小米轮播图(一)
  • 小米轮播图(二)
1-42 固定定位使用介绍
  • 固定定位
  • 仿新浪固定头部和广告
1-43 定位总结
  • 定位总结及其二维码
1-44 z-index
  • 叠放层级zindex
1-45 定位模式转换
  • 定位模式转换
1-46 visibility、display及overflow
  • visibility和display
  • 溢出overflow
1-47 鼠标样式
  • 鼠标样式
1-48 轮廓和防止拖拽文本域
  • 轮廓和防止拖拽文本域
1-49 vertical属性
  • vertical垂直对齐
  • vertical去除图片底测空白缝隙
1-50 css精灵图的使用介绍
  • css精灵技术产生的背景
  • css精灵技术的本质
  • css精灵技术的使用
  • css精灵技术拼出自己名字
  • 制作css精灵图
  • 鼠标经过更换精灵图片
1-51 阳光科技网站整体部署
  • 阳光科技网站准备工作
1-52 网站顶部区域
  • 顶部制作(一)
  • 顶部制作(二)
1-53 网站header区域
  • header制作(二)
  • header制作(一)切片使用导出
1-54 阳光科技网站banner区域
  • banner制作
1-55 网站主体区域
  • 主体1info(一)
  • 主体1info(二)
1-56 网站热线电话和下载模块
  • 热线电话模块
  • 下载模块
1-57 网站公司新闻区域
  • 公司新闻(一)
  • 公司新闻(二)
  • 公司新闻(三)
1-58 网站footer区域
  • footer底部(一)
  • footer底部(二)
  • footer底部(三)
1-59 阳光科技网站返回顶部
  • 返回顶部
1-60 滑动门使用介绍
  • 滑动门技术出现的原因
  • 滑动门技术实现原理
  • 滑动门技术代码实现
1-61 滑动门微信导航栏案例
  • 微信导航栏(一)
  • 微信导航栏(二)
1-62 CSS常用技巧
  • margin负值运用
  • css三角
  • 代码完成音量键
  • 给网站添加favicon图标
  • logo优化
1-63 CSS文本属性
  • 文本属性
  • 文字超出以省略号替代
1-64 CSS兼容性
  • CSS兼容性概述
  • css属性hack
  • css选择器hack
  • css条件注释语法的使用
  • css兼容性练习题
  • 注意兼容性书写顺序
1-65 CSS常见Bug
  • ie6双倍边距和最小高度问题
  • ie6奇数引起bug
  • ie67li里面多个浮动引起空白缝隙
  • IE6撑开高度的特性