CSS能很好的实现图片的剪切
图片的剪切-2
在此，介绍一个新属性： overflow:hidden （将超出容器的部分隐藏起来的作用）
案例演示
HTML部分：
<div> <img src="proxy.jpg" width="500" height="350" /> </div>
CSS部分：
div { width:300px; height:260px; overflow:hidden; } img { margin-left:-180px; margin-top:-50px; }
案例演示
实现图片水平对齐，不能直接对图片设置text-align属性，而是通过 对父元素添加该属性实现的。
图片的对齐-2
纵向垂直对齐，通过v
图片的剪切-1
在网站设计中，有时候会遇到对一张图片做多处使用的情况。例 如在子页面中以200*200尺寸显示，而在首页由于所给的空间不 够，只允许显示200*100的尺寸，那该怎么办呢？
第二种方式：在CSS布局中，我们采用新的思路实现 ，主要是通过对图片设置float属性。
图文实例：八仙过海
案例演示
谢谢观看
导入
首先，在网络世界中，各种各样的图片组成了丰富多彩的页面， 传达给用户各种信息 。
其次，图片的使用方式大体分为三种： 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" />
图片替代文本
什么时候才会用“图片替代文本”呢？
案例演示
1、使用特殊字体制作的图片作为文章标题更为吸引人，改善阅 读环境；
2、不破坏原有文本结构，不影响搜索引擎的收录。
图文混排
案例演示
文章段落中经常需要插入图片，我们通过两种方式对比进行了解：
第一种方式：传统的表格式布局中，插入一个表格， 在表格的单元格中插入图片，通过对单元格设置 align属性来控制图片居中、居左、居右显示。
如果4个边框都采用右 侧的写法会如何呢？
border-top-color /* 上边框颜色 */ border-top-style /* 上边框类型 */ border-top-width /* 上边框粗细 */
图片的对齐-1
横向水平对齐，分为左、中、右3种
<tr><td style="text-align:left;"> <img src="building.jpg"></td></tr> <tr><td style="text-align:center;"> <img src="building.jpg"></td></tr> <tr><td style="text-align:right;"> <img src="building.jpg"></td></tr>
第 8讲 使 用 CSS样 式 表设置 图片效 果
精品jing
易水寒江雪敬奉
回顾
CSS中如何设置文字样式？从哪些方面？ 在Google公司Logo案例中，它的实现思路是怎样的？ CSS中如何设置段落样式？
本讲目标
会使用CSS对图片边框进行设置 会使用CSS对图片进行对齐 会使用CSS对图片进行剪切 会使用CSS实现图片替代文本 会使用CSS对图文进行混排 图文实例：八仙过海
案例演示1 案例演示2
如上所示，我们发现通过border属性可以为<img>标记的图片添加边框。
问题：边框都是黑色的，风格单一，只能在边框粗细上调整，那 CSS对于图片边框都有哪些属性进行设置呢？
border-style:dotted;
/* 点画线 */
border-color:#FF9900; /* 边框颜色 */
border-width:5px;
/* 边框粗细 */
图片边框-2
CSS还可以分别设置4个边框的不同样式
案例演示1 案例演示2
border
border-left border-right border-top border-bottom
/* 左边框 */ /* 右边框 */ /* 上边框 */ /* 下边框 */