网页设计与制作技术 (十一).pptVIP

* * * * * * * 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 网页设计与制作技术（十一） —— CSS 设计彻底研究 主讲教师：徐颖 * 盒子的浮动与定位 盒子的定位 广义的“定位”：当提到把希望某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定为的问题。 狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词要翻译为中文，也是定位的意思，然而要使用CSS进行定位操作的手段，并不仅仅通过择个属性来实现，因此不要把把二者混淆。 盒子的浮动与定位 盒子的定位 static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。 fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。 盒子的浮动与定位 盒子的定位 static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 盒子的浮动与定位 盒子的定位 Relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 盒子的浮动与定位 盒子的定位 Absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。 盒子的浮动与定位 盒子的定位 Fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。 盒子的浮动与定位 盒子的display属性 body divBox-1/div divBox-2/div divBox-3/div spanBox-4/span spanBox-5/span spanBox-6/span divBox-7/div spanBox-7/span /body 盒子的浮动与定位 盒子的display属性 body div style=display:inlineBox-1/div div style=display:inlineBox-2/div div style=display:inlineBox-3/div span style=display:blockBox-4/span span style=display:blockBox-5/span span style=display:blockBox-6/span div style=display:noneBox-7/div span style=display:noneBox-8/span /body 介绍文字和图像的排版 CSS文字样式 准备网页 设置字体 文字大小 行高 文字颜色与背景颜色 文字加粗、倾斜与大小写 文字的装饰效果 文字的水平对齐方式 文字布局 段落的垂直对齐方式 介绍文字和图像的排版 CSS图像样式 5.2.1 基本设置 5.2.1 背景图像 5.2.1 标题的图像替换 介绍文字和图像的排版 CSS图像阴影 基本设置 柔边阴影 IE6兼容 介绍文字和图像的排版 CSS图像阴影 * * * * * * 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖 主讲教师 ：徐颖