第3课CSS1-设置方框与背景效果概要.ppt

CSS 第3课 用CSS设置方框效果 设置对象的背景颜色与背景图像 特别案例： 首字下沉 图片替换标题技术 利用滑动门技术制作宽度变化的背景 制作高度变化的背景效果 第五章、用CSS设置方框效果 边框属性：border 宽度和高度：width、height 对象浮动：float 对象外边距：margin 5.1、给对象添加设置边框属性（border） 边框属性有3个： border-width：边框粗细 border-color：边框颜色 border-style：边框线形 给图片加边框 给h1标题加边框 给p段落加边框。 给任何的标记加边框 边框线型： 5.2 设置对象宽度与高度属性（width、height） Width：设置宽度，如 width：30% 注意：当设置值为百分数时，表示对象宽度为其父层标记宽度的30%。 Height：设置高度，如 height：100px 5.3 设置对象的文字环绕（float属性） Float的属性值有： Left：元素向左浮动 Right：元素向右浮动 Inherit：继承父级元素的浮动属性 None：取消浮动 浮动的原理： 案例：设置图片与文字环绕效果 5.4 设置对象的外边距（margin） Margin设置对象与外部元素的距离。也可以单独设置某个方向的外边距。 Margin-top:设置上方外边距 Margin-left:设置左侧外边距 Margin-right:设置右侧外边距 Margin-bottom:设置底部外边距 设置对象外边距与文字的距离 5.5 内边距－－padding 用于设置对象边框与内容之间的距离。 padding可以设置4个属性值： 如：padding：10px 20px 10px 20px； 按照顺时针方向，依次为上、右、下、左padding的值。 第6章、设置对象的背景颜色与背景图像 6.1 设置背景颜色(background-color) 6.2 设置背景图像(background-image) 6.3 设置背景图像平铺(background-repeat) 6.4 设置背景图像位置(background-position) 6.5 设置背景图片位置固定(background-attachment) Ps：以上属性可设置于任何的对象如标题、段落、表格、图片等。 6.1 设置背景颜色(background-color) 6.2 设置背景图像(background-image) 6.3 设置背景图像平铺(background-repeat) 在设置背景时，图像有水平和竖直方向平铺。 repeat：默认值沿水平和竖直方向平铺 repeat-x：只沿水平方向平铺 repeat-y：只沿竖直方向平铺 no-repeat：不平铺，只显示一次 案例：制作浏览窗顶部渐变的网页背景效果： 6.4 设置背景图像位置(background-position) 设置背景图像位置在其父层元素的四个角落，有以下几个值： left、right、center、top、bottom 设置背景图像在其父层元素的坐标位置，元素的左上角作为坐标起点。 用数值或百分比表示位置值。 6.5 设置背景图片位置固定(background-attachment) 背景图像固定属性有三个值： Fixed：背景固定。 Scroll：随着滚动条移动，背景图像也跟着一起移动。 Inherit：继承父层元素的属性值。 6.6 图片替换技术---要求在不需要插入图片的情况下，利用背景图像技术实现用图片替换标题效果 2、接下来对html代码做小小调整，给h1标题添加一个外层标记div： divh1 美丽的阳朔/h1/div 3、先设置外层标记div： 为了方便观察div和h1的范围变化，我们替它们加上边框，完成后再把它删掉。 设置div的背景图片为制作好的标题图片，不重复，位置居中。 为保证div能完整显示背景图片，还要设置其高度height与背景图片相一致。 Div { ……..height：与图片高度一致;………} 4、设置内层的h1标记隐藏： h1 {。。。。Visibility：hidden。。。。} 5、最后去掉边框线。 6.7 滑动门技术 在一个网页中，可能需要给标题添加背景图片，由于标题的宽度各不相同，是否意味着我们需要制作不同宽度的背景图片呢？ 在这里我们利用滑动门技术，只需要制作一个背景图片，然后给标题文字设置两个重叠的背景图，上面的背景遮蔽下面的，我们通过设置参数使下面的背景露出左侧的花纹，而上面的背景只显示右侧的花纹。然后给对象设置不同的宽度，即可产生宽度变化的效果，我们把这种背景横向变化称之为水平滑动。 基于同样的原理，我们还可以对不同的段落文