HTML5+CSS3+JavaS教学幻灯片10

1、第10章 CSS美化图片本章内容o 10.1 图片边框样式o 10.2 对齐图片o 10.3 图文混排o 10.4 综合实例1 一句话新闻o 10.5 综合实例2学校宣传单10.1 图片边框样式o 10.1.1 图片边框o 10.1.2 图片缩放10.1.1 图片边框o在CSS3中，使用border-style属性定义边框样式，即边框风格。例如可以设置边框风格为点线式边框（dotted）、破折线式边框（dashed）、直线式边框（solid）和双线式边框（double）等。border-style属性的详细信息。o实例：10.1.htmlo可以使用border-top-style设定上边框样式

2、、border-right-style设定右边框样式、border-bottom-style设定下边框样式和border-left-style设定左边框样式。o实例：10.2.html10.1.2 图片缩放o在HTML标记语言中，通过img的描述标记height和width可以设置图片大小。width和height分别表示图片的宽度和高度，其中二者值可以数值或百分比，单位可以是px。需要注意的是高度属性heigth和宽度属性width设置要求相同。o实例：10.3.htmlomax-width和max-height分别用来设置图片宽度最大值和高度最大值。在定义图片大小时，如果图片默认尺寸超过了

3、定义的大小时，那么就以max-width所定义的宽度值显示，而图片高度将同比例变化，如果定义的是max-height，以此类推。但是如果图片的尺寸小于最大宽度或者高度，那么图片就按原尺寸大小显示。omax-width和max-height的值一般是数值类型。o实例：10.4.html10.2 对齐图片o 10.2.1 横向对齐方式o 10.2.2 纵向对齐方式10.2.1 横向对齐方式o所谓图片横行对齐，就是在水平方向上进行对齐，其对齐样式和文字对齐比较相似，都是有三种对齐方式，分别为“左”，“右”和“中”。 o实例：10.10.html10.2.2 纵向对齐方式overtical-align

4、 属性设置元素的垂直对齐方式，即定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。其语法格式为vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length。o实例：10.7.html10.3 图文混排o 10.3.1 文字环绕o 10.3.2 设置图片和文字间距10.3.1 文字环绕ofloat属性主要定义元素在哪个方向浮动。一般情况下这个属性总应用于图像，

5、使文本围绕在图像周围，有时它也可以定义其他元素浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。float语法格式为：float : none | left |right。o实例：10.8.html10.3.2 设置图片和文字间距opadding属性主要用来在一个声明中设置所有内边距属性，即可以设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。其语法格式为：padding :padding-top | padding-right | padding-bottom | padding-left。o实例：10.9.html10.4 综合实例1一句话新闻o分析需求o构建HTML页面o添加CSS代码，修饰DIVo使用类标识符指向dao添加CSS代码，修饰正副标题o引用类标识符o修饰图片o修饰段