首页 > CSS+div网页布局视频 > 网页培训设置图片效果 - CSS/DIV设计培训专题讲解 - 第2课

网页培训设置图片效果 - CSS/DIV设计培训专题讲解 - 第2课

发布-网页培训班 | 浏览量-

在线播放

视频下载

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

1.图片样式

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

  • 图片边框
  • 图片缩放

2.图片的对齐

 

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

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

3.图文混排

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

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

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

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

原文地址:http://www.35ui.cn/post/20100421311.html

标签北京网站制作网站栏目策划方案做网站个人网站制作公司网站优化培训网站seo培训班北京网页优化培训dreamweaver培训班

上一条: 网页培训CSS初探 - CSS基本知识 - 第1课
下一条: 网页培训设置网页背景- CSS/DIV网页设计布局专题讲解 - 第3课

  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码