HTML5+CSS3+JavaS教学幻灯片10.ppt

第10章 CSS美化图片 本章内容 10.1 图片边框样式 10.2 对齐图片 10.3 图文混排 10.4 综合实例1 —一句话新闻 10.5 综合实例2—学校宣传单 10.1 图片边框样式 10.1.1 图片边框 10.1.2 图片缩放 10.1.1 图片边框 在CSS3中，使用border-style属性定义边框样式，即边框风格。例如可以设置边框风格为点线式边框（dotted）、破折线式边框（dashed）、直线式边框（solid）和双线式边框（double）等。border-style属性的详细信息。 实例：10.1.html 可以使用border-top-style设定上边框样式、border-right-style设定右边框样式、border-bottom-style设定下边框样式和border-left-style设定左边框样式。 实例：10.2.html 10.1.2 图片缩放 在HTML标记语言中，通过img的描述标记height和width可以设置图片大小。width和height分别表示图片的宽度和高度，其中二者值可以数值或百分比，单位可以是px。需要注意的是高度属性heigth和宽度属性width设置要求相同。 实例：10.3.html max-width和max-height分别用来设置图片宽度最大值和高度最大值。在定义图片大小时，如果图片默认尺寸超过了定义的大小时，那么就以max-width所定义的宽度值显示，而图片高度将同比例变化，如果定义的是max-height，以此类推。但是如果图片的尺寸小于最大宽度或者高度，那么图片就按原尺寸大小显示。 max-width和max-height的值一般是数值类型。 实例：10.4.html 10.2 对齐图片 10.2.1 横向对齐方式 10.2.2 纵向对齐方式 10.2.1 横向对齐方式 所谓图片横行对齐，就是在水平方向上进行对齐，其对齐样式和文字对齐比较相似，都是有三种对齐方式，分别为“左”，“右”和“中”。 实例：10.10.html 10.2.2 纵向对齐方式 vertical-align 属性设置元素的垂直对齐方式，即定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。其语法格式为vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length。 实例：10.7.html 10.3 图文混排 10.3.1 文字环绕 10.3.2 设置图片和文字间距 10.3.1 文字环绕 float属性主要定义元素在哪个方向浮动。一般情况下这个属性总应用于图像，使文本围绕在图像周围，有时它也可以定义其他元素浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。float语法格式为：float : none | left |right。 实例：10.8.html 10.3.2 设置图片和文字间距 padding属性主要用来在一个声明中设置所有内边距属性，即可以设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。其语法格式为：padding :padding-top | padding-right | padding-bottom | padding-left。 实例：10.9.html 10.4 综合实例1—一句话新闻 分析需求 构建HTML页面 添加CSS代码，修饰DIV 使用类标识符指向da 添加CSS代码，修饰正副标题 引用类标识符 修饰图片 修饰段落 实现虚线显示 综合实例：10.10.html 10.5 学校宣传单 分析需求 构建HTML网页 添加CSS代码，修饰DIV 修饰图片 修饰段落 实例：10.11.html