博学谷 > 优质课 > 走进CSS的“绚丽”世界

[Web工程师必备技能] — CSS入门及进阶

走进CSS的“绚丽”世界

深入理解CSS绚丽特效

主讲:前端高级讲师 | 课程时长:27课时 | 学习人数:173人 | 难度: 基础

¥29.00 ¥120.00

立即报名

第 一 章:走进CSS的“绚丽”世界

1-1 CSS使用介绍

1-1-1 CSS是网页的美容师 免费试学
免费试学
1-1-2 CSS 初识 免费试学
免费试学
1-1-3 CSS体验语法规则 免费试学
免费试学
1-1-4 语法补充及其常见错误 免费试学
免费试学

1-2 font字体

1-2-1 font-size字号设置 免费试学
免费试学
1-2-2 font-family字体设置 免费试学
免费试学
1-2-3 Unicode字体 免费试学
免费试学
1-2-4 font-weight字体加粗 免费试学
免费试学
1-2-5 font-style字体风格 免费试学
免费试学
1-2-6 font连写综合设定 免费试学
免费试学

1-3 chrome开发者工具介绍

1-3-1 chrome开发者工具 免费试学
免费试学

1-4 选择器使用介绍

1-4-1 标签选择器 免费试学
免费试学
1-4-2 体验类选择器 免费试学
免费试学
1-4-3 类选择器练习Google案例 免费试学
免费试学
1-4-4 类选择器常见错误及其命名规范 免费试学
免费试学
1-4-5 多类名选择器(1) 免费试学
免费试学
1-4-6 多类名选择器(2) 免费试学
免费试学
1-4-7 体验ID选择器 免费试学
免费试学
1-4-8 类选择器和id选择器区别 免费试学
免费试学
1-4-9 通配符选择器 免费试学
免费试学

1-5 CSS注释

1-5-1 CSS注释 免费试学
免费试学

1-6 CSS外观属性

1-6-1 color颜色三种格式 免费试学
免费试学
1-6-2 line-height行高 免费试学
免费试学
1-6-3 文字居中和首行缩进 免费试学
免费试学

1-7 HTML标签语义化

1-7-1 标签的语义化(理论) 免费试学
免费试学

1-8 综合案例

1-8-1 综合案例(一) 免费试学
免费试学
1-8-2 综合案例(二) 免费试学
免费试学

1-9 CSS选择器

1-9-1 交集选择器 免费试学
免费试学
1-9-2 并集选择器 免费试学
免费试学
1-9-3 后代选择器 免费试学
免费试学
1-9-4 子元素选择器 免费试学
免费试学
1-9-5 复合选择器测试题 免费试学
免费试学

1-10 块级和行内元素

1-10-1 体验块级元素 免费试学
免费试学
1-10-2 体验行内元素 免费试学
免费试学
1-10-3 行内元素和和块级元素区别 免费试学
免费试学
1-10-4 体验行内块元素 免费试学
免费试学
1-10-5 三种显示模式转换 免费试学
免费试学
1-10-6 链接伪类 免费试学
免费试学

1-11 伪类和伪元素

1-11-1 元素伪类和focus
1-11-2 了解伪元素
1-11-3 简单导航小案例

1-12 行高

1-12-1 玩转行高(二)行高单位
1-12-2 玩转行高(一)

1-13 CSS样式表

1-13-1 行内样式表
1-13-2 内部样式表
1-13-3 外部样式表
1-13-4 样式表总结
1-13-5 导入式样式表

1-14 CSS三大特性

1-14-1 CSS权重特殊性
1-14-2 CSS继承性
1-14-3 CSS层叠性

1-15 CSS权重练习

1-15-1 a和h标题特殊性
1-15-2 6个经典权重练习题

1-16 背景图的介绍和使用

1-16-1 背景图片及其平铺
1-16-2 背景位置
1-16-3 背景简写
1-16-4 购物车案例
1-16-5 背景附着(背景固定)
1-16-6 英雄联盟背景做法

1-17 网页布局本质

1-17-1 看透网页布局的本质

1-18 盒模型

1-18-1 认识盒子模型
1-18-2 体会边框

1-19 表单和表格

1-19-1 表单边框清零
1-19-2 细线表格

1-20 轮廓线

1-20-1 轮廓线

1-21 active和focus的区别

1-21-1 链接的active和focus的区别

1-22 边框和内边距

1-22-1 边框详解分写
1-22-2 padding的使用
1-22-3 新浪导航

1-23 外边距

1-23-1 让盒子居中对齐的原理
1-23-2 清除内外边距
1-23-3 外边距合并问题

1-24 盒模型练习题

1-24-1 盒子宽度以及简单计算题
1-24-2 中等数学题
1-24-3 计算题

1-25 搜索趣图案例

1-25-1 综合案例(搜索趣图)案例分析
1-25-2 综合案例(搜索趣图)(一)
1-25-3 综合案例(搜索趣图)(二)
1-25-4 综合案例(搜索趣图)(三)

1-26 盒子模型布局

1-26-1 盒子模型布局稳定性

1-27 普通流

1-27-1 普通流的定义

1-28 浮动使用介绍

1-28-1 体会浮动
1-28-2 浮动的由来和方向
1-28-3 浮动特性之包裹性
1-28-4 浮动特性之对齐
1-28-5 浮动特性之多个盒子一行显示需都浮动
1-28-6 浮动特性之脱标性
1-28-7 浮动特性之模式转换
1-28-8 浮动特性之显示位置
1-28-9 浮动总结--浮漏特

1-29 版心和布局流程详解

1-29-1 一列固定宽度切居中
1-29-2 版心和布局流程
1-29-3 左窄右宽型
1-29-4 通栏平均分布型

1-30 尚合网站整体部署

1-30-1 尚合网站准备工作

1-31 尚合网站logo和search

1-31-1 logo和search结束
1-31-2 logo和search实体化

1-32 尚合网站nav

1-32-1 nav开始
1-32-2 nav部分文字
1-32-3 nav背景结束

1-33 尚合网站公告部分

1-33-1 公告部分开始
1-33-2 公告部分结束

1-34 尚合网站页面主体

1-34-1 页面主体三个盒子完成
1-34-2 页面主体部分h4公共部分完成
1-34-3 页面主体部分完成
1-34-4 页面主体新闻中心模块完成

1-35 尚合网站页面底部

1-35-1 页面底部开始
1-35-2 页面底部完成

1-36 清除浮动

1-36-1 为什么清除浮动
1-36-2 清除浮动其实更应该叫闭合浮动
1-36-3 清除浮动的本质
1-36-4 清除浮动之额外标签法
1-36-5 父级添加overflow清除浮动
1-36-6 after伪元素
1-36-7 利用after伪元素清除浮动
1-36-8 after伪元素空余字符法
1-36-9 双伪元素清除浮动

1-37 定位介绍

1-37-1 元素定位属性
1-37-2 为什么要用定位

1-38 静态定位

1-38-1 静态定位

1-39 相对和绝对定位

1-39-1 相对定位详解
1-39-2 父级没有定位子级以浏览器可视区对齐
1-39-3 父级有定位则以父级对齐
1-39-4 绝对定位不添加边偏移
1-39-5 子绝父相的由来

1-40 定位练习

1-40-1 定位练习
1-40-2 尚合网站添加定位
1-40-3 定位的盒子水平居中垂直居中

1-41 小米轮播图定位案例

1-41-1 小米轮播图(一)
1-41-2 小米轮播图(二)

1-42 固定定位使用介绍

1-42-1 固定定位
1-42-2 仿新浪固定头部和广告

1-43 定位总结

1-43-1 定位总结及其二维码

1-44 z-index

1-44-1 叠放层级zindex

1-45 定位模式转换

1-45-1 定位模式转换

1-46 visibility、display及overflow

1-46-1 visibility和display
1-46-2 溢出overflow

1-47 鼠标样式

1-47-1 鼠标样式

1-48 轮廓和防止拖拽文本域

1-48-1 轮廓和防止拖拽文本域

1-49 vertical属性

1-49-1 vertical垂直对齐
1-49-2 vertical去除图片底测空白缝隙

1-50 css精灵图的使用介绍

1-50-1 css精灵技术产生的背景
1-50-2 css精灵技术的本质
1-50-3 css精灵技术的使用
1-50-4 css精灵技术拼出自己名字
1-50-5 制作css精灵图
1-50-6 鼠标经过更换精灵图片

1-51 阳光科技网站整体部署

1-51-1 阳光科技网站准备工作

1-52 网站顶部区域

1-52-1 顶部制作(一)
1-52-2 顶部制作(二)

1-53 网站header区域

1-53-1 header制作(二)
1-53-2 header制作(一)切片使用导出

1-54 阳光科技网站banner区域

1-54-1 banner制作

1-55 网站主体区域

1-55-1 主体1info(一)
1-55-2 主体1info(二)

1-56 网站热线电话和下载模块

1-56-1 热线电话模块
1-56-2 下载模块

1-57 网站公司新闻区域

1-57-1 公司新闻(一)
1-57-2 公司新闻(二)
1-57-3 公司新闻(三)

1-58 网站footer区域

1-58-1 footer底部(一)
1-58-2 footer底部(二)
1-58-3 footer底部(三)

1-59 阳光科技网站返回顶部

1-59-1 返回顶部

1-60 滑动门使用介绍

1-60-1 滑动门技术出现的原因
1-60-2 滑动门技术实现原理
1-60-3 滑动门技术代码实现

1-61 滑动门微信导航栏案例

1-61-1 微信导航栏(一)
1-61-2 微信导航栏(二)

1-62 CSS常用技巧

1-62-1 margin负值运用
1-62-2 css三角
1-62-3 代码完成音量键
1-62-4 给网站添加favicon图标
1-62-5 logo优化

1-63 CSS文本属性

1-63-1 文本属性
1-63-2 文字超出以省略号替代

1-64 CSS兼容性

1-64-1 CSS兼容性概述
1-64-2 css属性hack
1-64-3 css选择器hack
1-64-4 css条件注释语法的使用
1-64-5 css兼容性练习题
1-64-6 注意兼容性书写顺序

1-65 CSS常见Bug

1-65-1 ie6双倍边距和最小高度问题
1-65-2 ie6奇数引起bug
1-65-3 ie67li里面多个浮动引起空白缝隙
1-65-4 IE6撑开高度的特性
提示
该课程已在购物车中了,无需重复加入
去购物车