当前位置:首页 > DIV+CSS教程 > 正文

视频:第1课 - 设置图片效果 - CSS/DIV布局专题讲解

作者:曾顺 来源:前沿视频教室 【 】 浏览: 添加日期:2008-06-26 我要评论(10)     

点击在线观看

点击下载该视频教程 动力软件园分流下载 FLV播放器下载 或者使用QQ影音播放

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

1.图片样式

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

  • 图片边框
  • 图片缩放

2.图片的对齐

 

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

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

3.图文混排

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

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

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

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

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: 视频 css图片效果

所属专题:视频教程

更多评论(10)..会员评论

wyq(27.224.*.*) 发表于:2014-04-22 22:24:05
在线观看不了,也下载不了。求解
68zch(121.18.*.*) 发表于:2011-07-02 08:53:17
视频打不开啊啊啊啊啊 ....
panlidan101(222.94.*.*) 发表于:2011-04-18 12:55:53
我的视频打开好慢,还有好多都打不开,急!
管理员回复:服务器问题
365day(218.28.*.*) 发表于:2011-03-24 13:48:38
非常感谢站长!标准之路太给力了!!!
管理员回复:欢迎常来
huangyh2610(219.232.*.*) 发表于:2010-05-27 13:10:21
请问你qq是多少呀
bandis(122.224.*.*) 发表于:2010-05-27 10:02:01
你好,有一个问题,例如“蓝采和”这几字在dw中可以右对齐,但是在Ie浏览器中却不能右对齐没有达到效果,请问这是什么原因?
管理员回复:请表述明确
jiang(222.184.*.*) 发表于:2010-05-06 15:32:22
想请问一下,那个CSS代码在编辑器里做和在代码区做有什么区别吗?还有就是在那个“SpryTabbedPanels.css“不是一样的么?
管理员回复:没什么区别
sytmyy(222.138.*.*) 发表于:2009-07-04 10:39:01
站长你好:我在做首字下沉的时候,发现了一个问题,请教一下,在DW设计中看到的首字上面为什么有一行字,在浏览的时候就没有了。这是我设置的问题还是就是这个样子的。请解答一下。谢谢!
管理员回复:请以浏览器中预览的为准,因为浏览器的内核和DW的不是一个,解析上存在差异。

出差旅游免费预订酒店

【视频教程】新手常见问题