HTML5+CSS3 Web前端设计基础教程 第3版 课件 第7、8章 CSS3与HTML5的高级应用、PC端典型页面的设计与实现

第7章本章将实际工作中经常出现，但理解稍难的知识加以汇总整理，着重向读者介绍一些CSS3与HTML5的主流应用，希望能够帮助读者进一步拓展思维，积累相关经验。CSS3与HTML5的高级应用7.1CSSSprite技术7.1.1CSSSprite技术分解1．原理解析图7-1“天猫网”部分背景图像2．优缺点7.1CSSSprite技术7.1.2CSSSprite技术的应用图7-3使用CSSSprite技术所用到的配图7.1CSSSprite技术

图7-4“相机”图标移动示意图

图7-5“地图”图标移动示意图7.1CSSSprite技术图7-6background-position属性正负取值关系7.2CSS3渐变1．Webkit引擎支持的CSS渐变语法（1）线性渐变（2）径向渐变2．创建CSS3渐变图7-7渐变预览效果7.3CSS3动画7.3.1变形——transform属性1．旋转函数——rotate()2．移动函数——translate()3．缩放函数——scale()图7-8transform属性预览效果7.3CSS3动画7.3.2过渡——transition属性1．transition-property属性2．transition-duration属性3．transition-timing-function属性4．transition-delay属性5．transition属性图7-9鼠标未经过时预览效果

图7-10鼠标经过时预览效果7.3CSS3动画7.3.3CSS3动画的应用——“幽灵按钮”1．什么是“幽灵按钮”图7-11“幽灵按钮”在某站点的应用7.3CSS3动画2．“幽灵按钮”的实现图7-12“幽灵按钮”最终预览效果7.4CSS3选项卡图7-17“CSS3选项卡”最终预览效果分析图7-18“CSS3选项卡”结构分析示意图7.4CSS3选项卡选项卡最外层细线由container容器提供“青年”选项卡左右两侧的细线由select类规则提供此处是有底部边框的，只不过边框颜色为白色，与底部背景颜色相同，“看起来像”没有而已此处贯穿左右的1像素灰色细线，由container-tit容器中的li元素提供图7-21细节放大示意图7.5HTML5Canvas7.5.1创建画布并绘制简单图形图7-22创建画布并绘制简单图形7.5HTML5Canvas7.5.2Canvas坐标、线条与圆1．坐标系统图7-23图形上下文的笛卡尔坐标系2．线条3．圆形图7-24绘制线条图7-25绘制线条谢谢观看！第8章本章主要从工作过程出发，依托PC端典型的页面版式，向读者介绍Photoshop在Web前端环境下常见的操作，以及整个Web页面的实现过程。PC端典型页面的设计与实现8.1Photoshop在Web前端中的常见操作8.1.1基础操作1．新建空白文档图8-1新建空白文档

2．标尺与参考线（1）标尺（2）参考线8.1Photoshop在Web前端中的常见操作图8-2标尺

图8-3拖拽出参考线3．隐藏/显示图层8.1Photoshop在Web前端中的常见操作锁定隐藏/显示图层标志图8-4隐藏/显示图层4．用吸管工具拾取颜色8.1Photoshop在Web前端中的常见操作图8-5拾取颜色

图8-6查看颜色值8.1.2切片并输出8.1Photoshop在Web前端中的常见操作图8-7创建切片

图8-8“切片选项”对话框8.2页面布局规划与实现图8-10站点首页效果图图8-11思考分析示意图8.2.1首页的实现1．各项准备工作2．首页头部区域的实现3．bannner区域的实现4．“关于我们”区域的实现8.2页面布局规划与实现5．“案例展示”区域的实现6．“新闻列表”区域的实现7．“版权”区域的实现8.2页面布局规划与实现图8-16“案例展示”区域结构布局示意图8.2页面布局规划与实现8.2.2列表页的实现1．列表页中部区域的规划与左侧“纵向导航”的实现图8-21列表页中部区域初步分析布局示意纵向列表导航新闻摘要区块8.2页面布局规