信息与网络管理中心办公室-浮动的应用-制作栏目框标题栏.pptVIP

浮动的应用－制作栏目框标题栏 标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字分别放在一个盒子的左右两端呢？ 最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。这时由于两个盒子都浮动，不占据外围容器的空间，所以必须设置外围盒子h3的高度，使它在视觉上能包含住两个浮动的盒子 结构代码 h3 id=colframe span class=title栏目标题1/span span class=moremore/span /h3 CSS代码 #colframe { font-size: 14px; width:300px; margin:0 auto; border:1px gray solid; height:24px; background-color:#CCCCCC; padding-top:10px;} 当然，也可以让右边的元素不浮动，而是把它设置为块级元素，这样该元素的盒子就能自动伸展到最右端，再设置为右对齐，则显示效果一样。更改的代码如下： #colframe span.more{ text-align:right; display:block; padding-right:12px; } 盒子在定位属性下的定位 相对定位 和 绝对定位 内容提要 定位属性position及其取值 相对定位 相对定位的应用－偏移的导航条 网页居中的相对定位法 绝对定位 绝对定位的应用 缺角的导航条 小提示窗口 下拉菜单 使用定位属性position 利用浮动属性定位只能使元素浮动形成图文混排或块级元素水平排列的效果，其定位功能仍不够灵活强大。 本节介绍的在定位属性下的定位能使元素通过设置偏移量定位到页面或其包含框的任何一个地方，定位功能非常灵活。 定位属性position的取值 为了让元素在定位属性下定位，需要对元素设置定位属性position，position的取值有四种，即relative、absolute、fixed和static。 其中static是默认值，表示不使用定位属性定位，也就是盒子按照标准流或浮动方式布局。fixed称为固定定位，它和绝对定位类似，只是总是以浏览器窗口为基准进行定位，但IE6浏览器不支持该属性值。因此定位属性的取值中用得最多的是相对定位（relative）和绝对定位（absolute），下面分别来介绍它们的作用。 偏移属性 偏移属性是指 top、left、bottom、right四个属性，它们的取值可以为像素等绝对单位，也可以是百分比 #mydiv { position:absolute; left: 50%； top: 30px; } 偏移属性仅对设置了定位属性的元素有效 相对定位 相对定位 使用相对定位的盒子的位置定位依据常以标准流的排版方式为基础，然后使盒子相对于它在原来的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 如果对一个元素定义相对定位属性（position: relative;），那么它将保持在原来的位置上不动。如果再对它通过top、left等属性值设置垂直或水平偏移量，那么它将“相对于”它原来的位置发生移动。 相对定位举例 #mybox { position: relative; left: 20px; top: 20px; } 相对定位的特点 元素原来占据的位置仍然会保留，也就是说相对定位的元素未脱离标准流； 因为是使用了定位属性的元素，所以会和其他元素发生重叠。 相对定位的作用 设置元素为相对定位的作用可归纳为两种：一是让元素相对于它原来的位置发生位移，同时不释放它原来占据的位置； 二是让元素的子元素以它为定位基准进行定位，同时它的位置保持不变，这时相对定位的元素成为包含框，一般是为了帮助里面的元素进行绝对定位。 相对定位的应用 鼠标滑过时向左下偏移的链接 a:hover { color: #ff0000; position: relative; right: 2px; top: 3px; } 相对定位水平居中法 设置wrap的定位是相对于它原来的位置，而它原来默认的位置是在浏览器窗口中左对齐，然后将其左边框移动到浏览器的正中央，这是通过left:50%实现的，这样就找到了浏览器的中线，再使用负边界法将盒子的一半宽度从中线位置拉回到左边，这样就实现了水平居中。 绝对定位 绝对定位 绝对定位，盒子的位置以他的包含框为基准进行定位。绝对定位的盒子从标准流中脱离。这意味着它们对其他元素的盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 注意：绝对定位是以他的包含框的边框内侧为基准进行定位，因此改变包含框的填充值不会对绝对定位元素的位置造成影