DIV+CSS课件.ppt

鼠标属性 让鼠标移到不同对象上面，显示不同形状。 Cursor属性，取值如下 Auto：自动按默认显示 Crosshair：“＋” Hand:手形 Text：文本I形 Wait：等待 …… CSS定位与显示 CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置 定位与布局密切相关 CSS中有三种基本的定位机制 普通流：显示的位置由元素在HTML文件中的位置决定 浮动：可以左右移动，直到碰到包含框或其它浮动框 绝对定位：可以直接将元素定位在页面上地任何位置 层叠顺序 进行CSS定位时，有可能发生多个元素的重叠 需要设置元素在Z轴上的层叠顺序 与定位相关的属性主要有14个 普通流定位机制 按照元素的类型和在HTML源文件中的出现顺序进行定位 就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列 inline元素（如span、strong元素）在行中水平布置 除非特殊的指定，否则所有的框都在普通流中定位 相对定位 相对于元素在普通文本流中的初始位置 如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动 style type=“text/css”#style1 {position: relative;left:20px;top:20px } /style 绝对定位 可以把某个元素精确的定位在某个地方 绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样 绝对定位的元素的位置是相对于最近的父元素而言的 固定定位 是绝对定位的一个特殊情况 与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置 这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置 style type=“text/css”#style1 {position:absolute;left:20px;top:20px } /style style type=“text/css”#style1 {position:fixed;left:20px; top:20px } /style 浮动（float） 浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘 当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果 如果水平位置没有空间了，则box3会跑到下面去 如果box2的高度没有box1高度大，box1减去box2的高度的部分会把box3拦住 Clear属性 如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性 clear : none | left |right | both 添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果 Visibility、display、Z-index属性 Visibility－设置对象是否可见 定义这个层级是不是要在画面上显示出功能来，最常利用java script来动态控制某个层级的显示状况，进而达到动态的效果 默认值是visible，不显示则设定成hidden display-－设置对象显示方式 display : block | none | inline | …… 可以各种不同的方式显示对象 display=none;与visibility=hidden;是不一样的 后者为隐藏的对象保留其占据的物理空间，而前者则不保留 Z-index－设置层叠顺序 当定位多个元素并将它们相互重叠时，可以使用该属性设置元素在Z轴的层叠顺序 z-index : number 属性值越大表示在越上层 CSS中的布局 使用CSS布局技术可以完成页面整体布局，实现各种布局样式 CSS布局技术都基于三个基本概念：定位、浮动和空白边操纵 基本布局方式有很多 按外观分，有单列布局、两列布局、三列布局等 按实现技术分，有基于自动空白边的布局、浮动布局等 按适应性分，有固定宽度布局、流式布局，弹性布局等 CSS排版-DIV分块 设计DIV块位置 多列浮动布局 clear:both #foot #branding #mainNav #content div id=“wrapper” div id=“branding”……/div div id=“content”……/div div id=“mainNav”……/div div id=“foot”……/div /div Div+CSS常见错误总结 1. 检查HTML元素是否有拼