第6讲DIV+CSS布局—图片.ppt

第6讲 DIV+CSS布局-图片 教学重难点 课前回顾：CSS文字段落 文字效果 段落效果 任务一 图片样式 1.图片的边框：border 设置边框样式 ：border-style 6-1.html 调整边框宽度：border-width 6-2.html 设置边框颜色：border-color 6-3.html 任务一 图片样式 Border-style属性： none 无边框（默认值） dotted 点线 dashed 虚线 solid 实线 double 双直线 groove 凹型线 ridge 凸型线 inset 嵌入式 outset 嵌出式 任务一 图片样式 注意： A.Css中的边框属性可以用一句CSS完成 实例：6-04.html B.css中允许对图片边框的上下左右分别设置 实例：6-05.html 任务一 图片样式 2.图片的缩放 图片的宽度高度语法格式：height:高度值; width:宽度值; 常用单位有 %(百分比) 相对值 px（像素） 固定值 实例：6-4.html 6-5.html 注意：只设置Width属性，或只设置height属性，图片都会自动等比例缩放。 任务二 图片对齐 图片的对齐方式与文字的对齐方式基本相同，分为： 1.横向对齐 （6-6.html）text-align 2.纵向对齐 （6-7.html）vertical-align 纵向精确数值：6-8.html 注意：图片的“纵向对齐”方式不常用 2017-6-24 任务三 图文混排 1.文字环绕 图片居于文字右边：float:right 图片居于文字左边：float:left 实例：6-9.html 2.设置图片和文字之间的间距 6-10.html 本讲总结 图片样式 图片对齐 作业 1、完成课堂实例 2、完成作业一、作业二、作业三