(第8讲使用CSS样式表设置图片效果.pptVIP

回顾 CSS中如何设置文字样式？从哪些方面？ 在Google公司Logo案例中，它的实现思路是怎样的？ CSS中如何设置段落样式？ 本讲目标 会使用CSS对图片边框进行设置 会使用CSS对图片进行对齐 会使用CSS对图片进行剪切 会使用CSS实现图片替代文本 会使用CSS对图文进行混排 图文实例：八仙过海 导入 首先，在网络世界中，各种各样的图片组成了丰富多彩的页面，传达给用户各种信息 。 其次，图片的使用方式大体分为三种： 1、作为单独的图片本身存在； 2、作为背景图片存在； 3、作为浮动元素存在。 本讲中，我们仅涉及到第一种情况，即以img 标记的方式存在于网页中，并且占位。 图片边框-1 img src=boluo.jpg border=0 / img src=boluo.jpg border=1 / img src=boluo.jpg border=2 / img src=boluo.jpg border=3 / 图片边框-2 CSS还可以分别设置4个边框的不同样式 图片的对齐-1 横向水平对齐，分为左、中、右3种 图片的对齐-2 纵向垂直对齐，通过vertical-align属性 图片的剪切-1 在网站设计中，有时候会遇到对一张图片做多处使用的情况。例如在子页面中以200*200尺寸显示，而在首页由于所给的空间不够，只允许显示200*100的尺寸，那该怎么办呢？ 图片的剪切-2 在此，介绍一个新属性： overflow:hidden （将超出容器的部分隐藏起来的作用） 图片替代文本 什么时候才会用“图片替代文本”呢？ 图文混排 文章段落中经常需要插入图片，我们通过两种方式对比进行了解： 图文实例：八仙过海 Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 了了了了了了来了来了 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 如上所示，我们发现通过border属性可以为img标记的图片添加边框。 border-style:dotted; /* 点画线 */ border-color:#FF9900; /* 边框颜色 */ border-width:5px; /* 边框粗细 */ 问题：边框都是黑色的，风格单一，只能在边框粗细上调整，那CSS对于图片边框都有哪些属性进行设置呢？ 案例演示2 案例演示1 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. border border-left /* 左边框 */ border-right /* 右边框 */ border-top /* 上边框 */ border-bottom /* 下边框 */ border-top-color /* 上边框颜色 */ border-top-style /* 上边框类型 */ border-top-width /* 上边框粗细 */ 如果4个边框都采用右侧的写法会如何呢？ 案