课程门户-章节详情

HTML5+CSS3 Web前端开发技术

于丽娜

1 内容简介
- 1.1 教材简介
- 1.2 课程简介
- 1.3 1+X标准
2 学习单元01 搭建项目开发环境
- 2.1 任务概述
- 2.2 知识结构（图）
- 2.3 知识链接
- 2.4 任务1：安装Chrome浏览器
- 2.5 任务2：安装HBuilderX开发IDE
- 2.6 任务3 :使用HBuilderX创建项目
- 2.7 单元小结
3 学习单元02 制作课程基础页面
- 3.1 任务概述
- 3.2 知识结构（图）
- 3.3 知识链接
- 3.4 任务1：制作页面通用尾部内容
- 3.5 任务2：制作页面通用头部内容
- 3.6 任务3：制作课程说明页面
- 3.7 单元小结
4 学习单元03 制作课程播放页面
- 4.1 任务概述
- 4.2 知识结构（图）
- 4.3 知识链接
- 4.4 任务1：制作课程视频列表
- 4.5 任务2：制作课程推荐列表
- 4.6 任务3：制作课程资源表格
- 4.7 任务4：制作课程播放区域
- 4.8 单元小结
5 学习单元04 使用表单制作页面
- 5.1 任务概述
- 5.2 知识结构（图）
- 5.3 知识链接
- 5.4 任务1：制作信息登记页面
- 5.5 任务2：制作用户登录页面
- 5.6 任务3：制作用户注册页面
- 5.7 单元小结
6 学习单元05 向项目中引入CSS
- 6.1 任务概述
- 6.2 知识结构（图）
- 6.3 知识链接
- 6.4 任务1：美化课程说明页面
- 6.5 任务2：美化课程播放页面
- 6.6 单元小结
7 学习单元06 使用CSS3美化页面
- 7.1 任务概述
- 7.2 知识结构（图）
- 7.3 知识链接
- 7.4 任务1：美化页面通用尾部
- 7.5 任务2：美化页面通用头部
- 7.6 任务3：美化课程资源表格
- 7.7 任务4：制作课程推荐部分
- 7.8 单元小结
8 学习单元07 使用盒子模型布局页面
- 8.1 任务概述
- 8.2 知识结构（图）
- 8.3 知识链接
- 8.4 任务1：制作课程视频列表
- 8.5 任务2：美化用户登录页面
- 8.6 任务3：美化用户注册页面
- 8.7 单元小结
9 学习单元08 使用CSS3浮动布局页面
- 9.1 任务概述
- 9.2 知识结构（图）
- 9.3 知识链接
- 9.4 任务1：使用浮动左右布局
- 9.5 任务2：使用浮动单行布局
- 9.6 任务3：使用浮动多行布局
- 9.7 单元小结
10 学习单元09 使用CSS3定位布局页面
- 10.1 任务概述
- 10.2 知识结构（图）
- 10.3 知识链接
- 10.4 任务1 :制作课程层叠角标
- 10.5 任务2 :绝对定位实现登陆页面居中
- 10.6 任务3 :固定定位置顶按钮
- 10.7 任务4：粘性定位页面通用头部
- 10.8 单元小结
11 学习单元10 利用CSS3动画美化页面
- 11.1 任务概述
- 11.2 知识结构（图）
- 11.3 知识链接
- 11.4 任务1：制作鼠标悬浮过渡效果
- 11.5 任务2：使用动画制作轮播图
- 11.6 单元小结
12 学习单元11 使用CSS3弹性盒子布局页面
- 12.1 任务概述
- 12.2 知识结构（图）
- 12.3 知识链接
- 12.4 任务1 :使用弹性盒子布局推荐页面
- 12.5 任务2 :使用弹性盒子布局课程页面
- 12.6 单元小结
13 学习单元12 使用CSS3媒体查询实现页面响应式
- 13.1 任务概述
- 13.2 知识结构（图）
- 13.3 知识链接
- 13.4 任务1：用户登录页面增加响应式
- 13.5 任务2：将课程推荐页面增加响应式
- 13.6 单元小结
14 封底
- 14.1 封底

任务2：美化课程播放页面

1 任务分析
2 知识平台
3 拓展延伸
4 巩固测试

任务目标

利用CSS美化课程播放页面。

任务要求

（1）将3.1、3.3、3.4任务制作的“视频列表”列表、“课程资料”表格、播放区域等部分代码进行整合，制作成课程播放页面。

（2）所有元素清除内外边距。

（3）播放器设置：宽度为800像素，高度根据视频资源自动适配。

（4）“课程资料”表格设置：宽度为800像素；标题居中；外边框为直线、黑色，宽度为2像素；表头部分背景色为#aaaaaa；主体部分奇数列背景色为#cccccc，偶数列背景色为#eeeeee；表格内的超链接字体加粗。

（5）“视频列表”列表设置：宽度800像素；标题居中；播放中的超链接设置字体颜色为red且显示下划线，其他超链接字体颜色为orange且无下划线。效果下图所示。

效果如下图：

任务实施

1. 将已有的播放器部分代码、资源表格部分代码、视频列表部分代码进行整合为一个HTML文件，并通过外部样式方式引入css文件。

2. 根据要求使用通配符选择器、标签选择器、层次选择器、结构伪类选择器等进行元素的选取，并进行相应样式效果的设定。

教学微课

教学课件

经验分享

使用link标签方式的外部样式引用是CSS的推荐方式，还有另外一种基于CSS语法的引入方式。如下：

<!DOCTYPE html>

<html>

<head>

<style>

@import url(./style1.css)

</style>

</head>

<body>

<h1>Hello CSS</h1>

</body>

</html>

这是使用了CSS语法中的文件引入规则，以内部样式的方式运行样式中的文件引用操作，来实现类似外部样式的操作。但是两者的区别非常明显：

1. link 是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等；@import 是CSS提供的语法规则，只有导入样式表的作用。

2. 加载页面时， link标签引入的css被同时加载；而@import 引入的css将在页面加载完毕后进行加载。

3. @import是CSS2.1才有的语法，故只在IE5+ 才能识别；而link是HTML标签，不存在兼容性问题。

4. 通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

5. @import引入的样式，会被层叠掉。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时会被下面的同名样式层叠。

6. 综合上述内容，推荐使用link标签方式引入外部样式表文件。如今，@import方式大多应用于一些CSS解析引擎用来表示文件引用关系，并不会直接在页面中使用@import方式进行引用。

能量贴士

积善之家，必有余庆;积不善之家，必有余殃。语出《周易》。

图片预览