Web前端开发简明教程（HTML+CSS+JavaScript+jQuery）全套PPT课件.ppt

11.1position定位例11-1演示相对定位与普通流定位的不同。*11.1position定位common.css部分代码（保存在css文件夹中）。*11.1position定位例11-1在浏览器中的浏览效果如下图所示：*11.1position定位定位还可以与伪类结合使用：*11.1position定位绝对定位，相对于其定位祖先元素定位，所谓定位元素就是元素采用了相对定位或绝对定位，次元素就是定位元素。*11.1position定位common2.css部分代码*11.1position定位浏览效果如图所示：*11.1position定位如果父元素是定位元素，则元素将相对父元素定位，如将11-2的类headerman设置为定位元素：*11.1position定位在浏览器中的浏览效果如图所示：*11.1position定位这种定位经常出现在下拉菜单中，例11-3演示用绝对定位实现下拉菜单。（源码参照课本）例11-3在浏览器中浏览效果如图所示：*11.1position定位可以完善css代码，嵌套列表平时隐藏，当鼠标移动到上一级列表时显示：*11.1position定位完善代码后，平常情况下嵌套列表隐藏如下图：fixed固定定位，元素将相对于浏览器边框定位，如常用的百度页面，在向下滚动时，搜索框固定在页面顶端，如下图所示：*11.2浮动CSS属性float用于设置浮动，其取值如下表：浮动能让元素脱离文档流，向左或向右移动。最初浮动用于图片，设置将图片浮动后文字环绕图片。*11.2浮动下面的代码在文字中插入一张图片：在浏览器中的浏览效果如图所示：*11.2浮动如果设置图片浮动：则图片将向左浮动到父元素里的最左边，父元素中的文字环绕图片，效果如图：*11.2浮动现在浮动不仅用于图文混排，可以将任意HTML元素设置浮动来达到特定的排版效果。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。下面的例子演示设置div浮动实现布局。*11.2浮动*11.2浮动common4.css：*11.2浮动*11.2浮动例11-4在浏览器中的浏览效果如图：*11.2浮动从图可以看到，第一个子div向左浮动，遇到父元素边框时停止；第二个子div向左浮动，遇到父元素的边框线，试图移动到上一排，由于第一排剩下的空间足够（600px-1px*2-250px-5px=343px），所以第二个子div移动到第一排遇到第一个子div的边框时停止，此时这两个子div并排排列；第三个div也向左浮动，遇到父元素的边框线是试图向上移动与前面的div位于同一排，但第一排空间不够(600px-1px*4-250px*2-5px*2=86px)，因此第三个div不能移动到上一排，只能位于第二排；其他子div的情况依次类推。*10.1CSS列表*10.1CSS列表实例：list-style-image属性使用图像来替换列表项的标记，实例：用图片“arrow.gif”作为列表的项目符号*10.1CSS列表list-style-position属性设置在何处放置列表项标记，取值如下表所示：*10.1CSS列表例10-1演示了属性“inside”与“outside”的区别。（源码参照课本）例10-1在浏览中浏览效果如图：*10.1CSS列表可以看到，当list-style-position属性为inside时，项目符号位于li的边框线内；如果为当outside，项目符号位于li的边框线外。list-style为简写属性,，可以将以上3个列表样式属性list-style-type、list-style-image、list-style-position的值赋予list-style：*10.2CSS表格CSS表格属性可以设置表格的边框线、尺寸、对齐方式等。如需在CSS中设置表格边框，可以使用border属性。下面的代码为table、th以及td设置了蓝色边框：*10.2CSS表格通过width和height属性定义表格的宽度和高度。下面的代码将表格宽度设置为100%，同时将th元素的高度设置为50px：*10.2CSS表格text-align和vertical-align属性设置表格中文本的对齐方式。text-align属性设置水平对齐方式，比如左对齐、右