在线建站培训
您的位置: 魔客吧魔客学院div+css视频教程查看内容

课时2-1:设置图片效果

讲师:moke | 课程:div+css视频教程


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

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

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

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

4.
图文混排实例:八仙过海
AD13411928.gif
我们在这里通过具体实例,进一步巩固图文混排的方法,并运用到实际的网站制作中。该例以介绍中国传统的八仙为题材,充分利用CSS图文混排的方法,实现页面的效果。本例最终效果如图所示。
课程QQ群:146535366 报名截止时间:2月23日 咨询客服QQ:272922238