学选—chap5 样式表布局 .ppt

Internet与网页设计 专题—— 样式表的布局 统一网站风格、制作基本特效 页面的基本制作流程 1、分析效果图 给效果图分区，如头部、内容和底部 2、切图 3、制成HTML页面 目录 1、元素定位基础知识 2、定位属性及其应用 3、页面的背景设定 4、浮动及清除浮动 5、ul和li 6、CSS的容器属性 7、CSS的布局 1、元素定位基础知识 （1）块元素 （2）内联元素 （3）浮动属性的应用 （1）块元素（block element） 块元素（例如div、p、form、table等元素）一般是其他元素（包括块和内联元素）的容器元素 在没有任何布局属性作用时，默认排列方式为换行排列。 可以将块元素想象成box。 剪贴文摘和网页布局模式的联系。 实例：block.html 定义了类div1和类div2 观察div1和div2的相对位置 （2）内联元素（inline element） 内联元素（例如a、img、span、input等元素）只能容纳文本或其他内联元素。 在没有任何布局属性作用时，默认排列方式为同行排列。 实例：inline.html 定义了类span1和类span2 观察span1和span2的相对位置 两类元素的划分 块元素(block element) ◎ address - 地址◎ blockquote - 块引用◎ center - 举中对齐块◎ dir - 目录列表◎ div - 常用块级容易，也是css layout的主要标签◎ dl - 定义列表◎ fieldset - form控制组◎ form - 交互表单◎ h1 - 大标题◎ h2 - 副标题◎ h3 - 3级标题◎ h4 - 4级标题◎ h5 - 5级标题◎ h6 - 6级标题◎ hr - 水平分隔线 内联元素(inline element)◎ a - 锚点◎ abbr - 缩写◎ acronym - 首字◎ b - 粗体(不推荐)◎ bdo - bidi override◎ big - 大字体◎ br - 换行◎ cite - 引用◎ code - 计算机代码(在引用源码的时候需要)◎ dfn - 定义字段◎ em - 强调◎ font - 字体设定(不推荐)◎ i - 斜体◎ img - 图片◎ input - 输入框 块和内联元素的混合默认排列 当页面中既有块又有内联时，由于块元素不允许任何元素排列在其两边，所以每当遇到块元素就会另起一行 实例：blockAndInline.html (3)可以通过浮动属性改变块的位置 浮动属性即CSS中的float属性，其值为auto、left、right。浮动属性不继承。 通过浮动属性可以改变原有块的位置。 实例：block-float.html 2、定位属性及其应用 (1)、定位属性的内容 (2)、绝对定位 (3)、相对定位 (4)、固定定位 (1)、定位属性的内容－position 定位模式（position属性）不可继承，其取值可以为：static、relative、absolute、fixed。 Static：元素按普通方式即按照html的规则进行定位。 Relative：元素保持原来的大小偏移一定的位置 Absolute：元素从页面元素中被独立出来，利用边偏移进行定位。 Fixed：元素从页面元素中独立出来，其位置相对于屏幕本身而不是文档本身。 边偏移属性 Top——定义元素相对于其父元素上边线的距离 Right——………………………………………右……………………. Left——…………………………………………左…………………….. Botton——…………………………………….下…………………….. (2)、绝对定位(position:absolute) 绝对定位的元素的位置由边偏移属性确定 绝对定位使元素完全从文档中独立出来，因此该元素可能会覆盖其他元素或者被其他元素覆盖。 实例 (3)、相对定位 相对于该元素在HTML文档中的初始位置 如果一个元素进行相对定位，它将以它原本所在的位置为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动 (4)、固定定位 是绝对定位的一个特殊情况 与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置 这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置 注意：IE6不支持此属性，IE7支持。 实例：5-7fixed.html 3、页面的背景设定 背景图片：background-image:url(图片路径) 默认排列方式为从左到右，从上到下的顺序全页面填充。 图片的重复方式：利用