HTML5+CSS3移动Web开发实战单元 8 复杂样式与网页特效设计.pptxVIP

HTML5+CSS3移动 Web 开发实战陈承欢 编著精选 8 种类型的网站项目，55 个典型教学案例实例探析 + 引导训练 + 同步训练 + 拓展训练反映移动 Web 应用开发的实际需求和水平单元?8 复杂样式与网页特效设计 在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，相比以前的Web排版，Web的开放字体格式也提供了更高的灵活性和控制性。本单元通过对复杂样式与网页特效设计的探析与训练，重点讲解CSS各种类型的选择器、CSS框模型、边框属性、外边距属性、内边距属性、多列属性、动画属性和HTML5拖放的实现方法等方面的知识。读者应学会网页中的复杂样式与网页特效的设计方法。实例探析任务8-1 制作迷你音乐播放器面板【效果展示】 迷你音乐播放器0801.html的浏览效果如图8-1所示。图8-1　迷你音乐播放器0801.html的浏览效果【网页探析】1．网页0801.html的HTML代码探析 网页0801.html主体结构的HTML代码如表8-1所示。表8-1　网页0801.html主体结构的HTML代码表8-2　网页0801.html主体结构的CSS代码2．网页0801.html的CSS代码探析 网页0801.html主体结构的CSS代码如表8-2所示。续表续表任务8-2 探析纯CSS3实现的焦点图切换效果【效果展示】 网页0802.html中的焦点图的切换效果如图8-2所示。图8-2　网页0802.html中焦点图切换效果【网页探析】1．网页0802.html的HTML代码探析 网页0802.html的HTML代码如表8-3所示。表8-3　网页0802.html的HTML代码表8-4　网页0802.html的CSS代码2．网页0802.html的CSS代码探析 网页0802.html的CSS代码如表8-4所示。续表续表知识梳理1．CSS框模型（Box） CSS框模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。CSS框模型的组成结构示意图如图8-3所示。图中，element表示网页元素；border表示边框；padding表示内边距，也将其翻译为填充；margin表示外边距，也将其翻译为空白或空白边。本书中，我们把padding和margin统一称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。图8-3　CSS框模型的组成结构示意图 元素框的最内部分是实际的内容。直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距、边框组成的区域。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。 在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 假设元素框的每个边上有10px的外边距和5px的内边距。如果希望这个元素框达到100px，就需要将内容的宽度设置为70px，如图8-4所示。 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。图8-4　元素框的内容宽度、内边距和外边距尺寸示意图2．CSS边框属性（Border和Outline） 在HTML中，使用表格来创建文本周围的边框，但是通过使用CSS边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。通过CSS3，可以创建圆角边框，向矩形添加阴影，使用图片来绘制边框，并且不需使用PhotoShop之类的设计软件。在CSS3中，border-radius属性用于创建圆角，box-shadow属性用于向方框添加阴影，border-image属性可以使用图片来创建边框。元素的边框（border）是围绕元素内容和内边距的一条或多条线，border属性允许设置元素边框的样式、宽度和颜色。 CSS规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。 样式是边框最重要的一个方面。这不是因为样式控制着边框的显示，而是因为如果没有样式，将根本没有边框。CSS的border-style 属性定义了10个不同的非inherit样式，包括none。3．CSS外边距属性（Margin） 围绕在元素边框的空白区域是外边距，设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性。这个属性接受任何长度单位（可以是像素、英寸、