第3章 节 使用CSS设置图片样式 CSS+DIV网页样式与布局从入门到精通课件.pptVIP

第3章 使用CSS设置图片样式 学习要点 CSS设置设置图片样式的方法。 CSS控制图片的对齐方式。 灵活使用CSS文字和图片属性进行图文混排。 3.1 图片样式设置基础 3.1.1 定义图片边框 在HTML语法里，可以直接通过.img标记的border属性来为图片添加边框，语法如下所示： img src=”图片路径” border=”数值” 使用CSS中的border-style、border-color和border-width三个属性来定义边框，其语法如下： border-style :参数; border-color:参数; border-width:数值; border-style属性用于设置边框的样式，用的最多的两个参数是“dotted”表示点划线，用“dashed”表示虚线，其他的一些值会在后面的章节中详细说明。border-color 属性用于设置边框的颜色。border-width 属性用于设置边框的宽度。 3.1.2 定义图片大小 CSS设置图片大小只需设置图片的宽度属性width和高宽height即可，设置方法如下： img { width:数值; height:数值; } 其中宽度属性width和高宽属性height的值既可以是绝对数值，如200px，也可以是相对数值，如50%，当width设置为50%时，图片的宽度将调整为父元素宽度的一半。 3.1.5 设置文字环绕效果 CSS使用float属性来实现图片的文字环绕，另外，除了float属性以外，再配合使用padding属性和margin属性，使图片和文字达到一种最佳的效果。 float属性的作用是使对象产生浮动，其语法如下： {float:left|right|none;} float属性共有三个值，其作用分别如下： none：默认值，对象不浮动； left：左浮动，对象向其父元素的左侧仅靠； right：右浮动，对象向其父元素的右侧仅靠。 3.2 案例实战 3.2.1 图文混排 3.2.2 图片布局 3.2.3 多图排列 3.2.4 阴影图片 3.2.5 圆角图片 3.2.6 设计圆角栏目 End Thank you