项目7 美化页面精要.ppt

芜湖职业技术学院 * 项目7 美化页面 《HTML5网页设计与实现》 『作 者』徐 琴 『时 间』2015.6 美化页面——学习情境 冰天美帝公司的员工小黄在前面的学习中，已经做出基本的框架，大致的样式也实现了，但是，在一些细节方面还没有达到理想的要求，例如：给文本设置投影的效果，想用字体型图标装饰页面，等等。他还需要学习美化页面的知识。 * CSS3文本阴影 text-shadow，即文本阴影，它可以设置水平阴影、垂直阴影、模糊的距离，以及阴影的颜色。其语法为： text-shadow: h-shadow v-shadow blur color; * h-shadow 水平阴影的位置（必需） v-shadow 垂直阴影的位置（必需） blur 模糊的距离（可选） color 阴影的颜色（可选） CSS3边框 利用CSS3可以在不使用图片处理软件的情况下，创建圆角边框，给矩形设置阴影，使用图片绘制边框。 css3中的border-radius属性可以轻松地设置元素的圆角边框，其语法为： border-radius: 1-4 length|% / 1-4 length|%; box-shadow属性可以为矩形框添加一个或多个阴影。其语法为： box-shadow: h-shadow v-shadow blur spread color inset; * CSS3边框 border-image 属性是一个简写属性，用于设置以下属性： ? border-image-source（用在边框的图片的路径。） ? border-image-slice（图片边框向内偏移） ? border-image-width（图片边框的宽度） ? border-image-outset（边框图像区域超出边框的量） ? border-image-repeat（图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)） * css视差效果 我们利用背景图像可以实现一定的视差效果，即当调整窗口大小时，背景图像会产生不同速度的移动。可以使得整个页面有层次有深度，添加活泼感。 * @font-face 通过css3的@font-face，我们可以在不使用图片素材的情况下使用任何字体了，不需要考虑用户的机器上是否安装了该字体。 @font-face{ font-family:Your WebFontName; src:source[format][,sourceformat]*; [font-weight: weight]; [font-style: style]; } * 图标字体 人们把网站中用到的各种图标使用font来实现，即图标字体（icon font）。 i class=icon-briefcase/i icon-briefcase i class=icon-briefcase icon-large/i icon-briefcase i class=icon-briefcase icon-2x/i icon-briefcase i class=icon-briefcase icon-3x/i icon-briefcase i class=icon-briefcase icon-4x/i icon-briefcase i class=icon-briefcase icon-5x/i icon-briefcase * 练习题 * 1. 利用图标字体制作出如下图所示的列表。 练习题 * 利用素材中coffee.jpg和文本阴影的方法制作出如下图所示效果。 * THANK YOU! 项目7 美化页面 《HTML5网页设计与实现》 芜湖职业技术学院