第四课 CSS设置图片效果

在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人更直观的感受网页所要传达给用户的信息。本课介绍CSS设置图片风格样式的方法，包括图片的边框、对齐方式、图文混排等，并通过实例综合文字、图片的各种运用。

1.图片样式

作为单独的图片本身，它的很多属性可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确的调整图片的各种属性，还可以实现很多特殊的效果。我们在这里主要讲解CSS设置图片基本属性的方法，为进一步深入探讨打下基础。希望大家能够掌握以下两个方面的内容：

• 图片边框
• 图片缩放

2.图片的对齐

当图片与文字同时出现在页面上的时候，图片的对齐方式就显得尤其的重要。如何能够合理的将图片对齐到理想的位置，成为页面是否整体协调、统一的重要因素。我们在这里从图片水平对齐和竖直对齐两方面出发，分别介绍CSS设置图片对齐方式的方法。希望大家能够掌握以下两个方面的内容：

• 横向对齐方式
• 纵向对齐方式

3.图文混排

Word中文字与图片有很多排版的方式，在网页中同样可以通过CSS设置实现各种图文混排的效果。我们在这里在上一课文字排版和上几节图片对齐等的基础上，介绍CSS图文混排的具体方法。希望大家能够掌握以下两个方面的内容：

• 文字环绕
• 设置图片与文字间距

4.图文混排实例：八仙过海

我们在这里通过具体实例，进一步巩固图文混排的方法，并运用到实际的网站制作中。该例以介绍中国传统的八仙为题材，充分利用CSS图文混排的方法，实现页面的效果。本例最终效果如图所示。