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

单元?8 复杂样式与网页特效设计;实例探析 任务8-1 制作迷你音乐播放器面板 【效果展示】 迷你音乐播放器0801.html的浏览效果如图8-1所示。;【网页探析】 1．网页0801.html的HTML代码探析 网页0801.html主体结构的HTML代码如表8-1所示。;2．网页0801.html的CSS代码探析 网页0801.html主体结构的CSS代码如表8-2所示。;续表;续表;任务8-2 探析纯CSS3实现的焦点图切换效果 【效果展示】 网页0802.html中的焦点图的切换效果如图8-2所示。;【网页探析】 1．网页0802.html的HTML代码探析 网页0802.html的HTML代码如表8-3所示。;2．网页0802.html的CSS代码探析 网页0802.html的CSS代码如表8-4所示。;续表;续表;知识梳理 1．CSS框模型（Box） CSS框模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。CSS框模型的组成结构示意图如图8-3所示。图中，element表示网页元素；border表示边框；padding表示内边距，也将其翻译为填充；margin表示外边距，也将其翻译为空白或空白边。本书中，我们把padding和margin