响应式Web开发项目教程（HTML5+CSS3+Bootstrap）全套PPT课件.pptx
单元1响应式和HTML5+CSS3初体验;学习目标;响应式Web设计简介;响应式Web设计是和HTML5+CSS3互相配合与支持的，技术点包括：;使用HTML5+CSS3绘制HTML5的logo;;用浏览器打开网址：/html/logo/。在该网站将看到HTML5的八大革新，如图下所示。;HTML5以“简单至上，尽可能简化”为原则做了以下改进：;HTML5规范以“用户至上”为宗旨。也就是说在遇到冲突时，规范的优先级如下：
用户页面作者实现者（浏览器）规范开发者（W3C/WHATWG）
纯理论。
另外，HTML5还引入了一种新的安全模型来保证HTML5足够安全。
;HTML文档是由多种标签组成，一个HTML5的标准模板如下所示：;;任何HTML标签都拥有style属性，用来设置行内样式，其基本语法如下所示：
;链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link/标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：;为了更好的兼容不同内核的浏览器，CSS3中部分属性需要添加浏览器的私有前缀，将某个样式以-xx-开头，具体如下：;使用HTML5+CSS3绘制HTML5的logo;;HTML5中常用的语义化标签，如下表所示。
;传统方式布局与语义化标签布局;CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。
;元素名;CSS中的一个基本概念就是盒子模型，所谓盒子模型就是把HTML页面中的元素看作是一个矩形区域，即元素的盒子。
盒子由margin（外边距）、border（边框）、padding（内边距）、content（内容）四部分组成。
;网页是由多个元素构成的盒子排列而成的。而多个盒子之间会出现外边距合并的现象，具体如下：;;CSS的浮动可以通过float属性进行设置，默认值为none（不浮动）。;在网页开发中，如果需要网页中的某个元素在网页的特定位置出现，例如弹出菜单，这时可以通过CSS的position属性进行设置，示例如下：
;浮动和定位的使用区别;z-index层叠等级属性;;;作业;单元2文本类网页设计;请简述什么是响应式Web设计，并列举响应式Web设计需要应用哪些技术。
请简述HTML5的相比原来的版本有哪些更新，并列举HTML5常用的语义化标签（6个以上）。
;掌握;电子杂志页面;知识点概述;CSS的字体样式属性用于定义文本的字体系列、大小、风格等，CSS常用的字体样式属性如下表所示。;CSS3@font-face规则;在网页制作中，如果想让一个段落的内容像报刊、杂志中那样分栏显示，就用到了CSS3中提出的多列布局模块（Multi-columnLayoutModule。
接下来通过一个案例来演示多列布局的应用，页面效果如图所示。;;软文推广页面;CSS的文本外观属性用于设置颜色、字间距、字母间距、水平对齐、文本装饰、阴影等。;在CSS中，使用text-shadow属性可以为页面中的文本添加阴影效果，其基本语法格式如下：;;如果在HTML文件中一个标签嵌套另一个标签，两个标签中都有文字，要求显示为一种颜色，那么，是不是要分别进行设置呢？;我们在做网页代码的时候，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。;CSS优先级即是指CSS样式在浏览器中被解析的权重不同。
多重样式（MultipleStyles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下所示：
;CSS选择器的优先级如下所示。
;;font-awesome一个开源免费的图标工具，当前的版本是4.5.0。;应用字体图标主要分为两个步骤：
在页面引入font-awesome.min.css文件。
为页面元素添加相应的class,例如“iclass=”fafa-comments”,会在页面显示如下图所示的图标。
每个图标都有相应的class，如果想使用其他的图标可以去地址：http://fontawesome.io/icons/进行查看。;开发者还可以自定义引用字体图标的类名，改变字体图标的大小、颜色等，实现如右图所示的效果。
;;案例代码（详见教材代码实现）;;;对于任何一个网站来说，拥有一个易用的导航栏都是非常重要的，可以大大的提高用户体验，导航栏其实就是一个超链接的列表，所以使用无序列表ul标签和超链接来实现它再合适不过了。
接下来通过一个案例来介绍导航效果，如下图所示。;手机邮箱导航页面;案例代码（详见教材代码实现）;作业;单元3图文展示网页设计;请简要概括什么是CSS的层叠性、继承性和重要性。
请简述什么是CSS的优先