课程主题 使用表格列表及定位属性美化网页-网页客户端技术 课程-1728976772423.pptx

;使用表格、列表及定位属性美化网页;定位属性（position）;position属性

position属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

基本语法：position：absolute|fixed|relative|static|inherit

;语法说明：

absolute，生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定；

fixed，生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left,top,right以及bottom属性进行规定；

relative，生成相对定位的元素，相对于其正常位置进行定位。因此，left:20会向元素的LEFT位置添加20像素；

static，默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）；

inherit，规定应该从父元素继承position属性的值。;例如，以下代码第1行设置了类名为pos_left的h2标题为相对定位，相对于其正常位置向左移动20像素。第2行设置了类名为pos_abs的h2标题为绝对定位，距离页面左侧100像素，距离页面顶部150像素。

h2.pos_left{position:relative;left:-20px}

h2.pos_abs{position:absolute;left:100px;top:150px};位置属性--top、bottom、left、right

规定元素的上、下、左、右外边距边界与其包含块左边界之间的偏移。

基本语法：top|bottom|left|right：auto|长度值|百分比

语法说明：

auto表示采用默认值；

长度值包括数字和长度单位，长度单位采用前文中多次提到的单位；

百分比是一个相对值。

例如，以下代码定义了图像的左边的位置：

img{position:absolute;left:100px;};z-index属性

设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。默认的z-index是0。对于熟悉Photoshop或Flash的人来说，可以把z-index理解为图层之间的关系。

基本语法：z-index：auto|数字;z-index属性

语法说明：

auto表示子层会按照父层的属性显示；

数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。;z-index属性

例如，以下代码设置了标题和图片的堆叠：

html

head

styletype=text/css

img.x{position:absolute;left:0px;top:0px;z-index:-1}

/style

/head

body

h1这是一个标题/h1

imgclass=xsrc=/i/eg_mouse.jpg/

p默认的z-index是0。z-index为-1拥有更低的优先级。/p

/body

/html

;overflow

overflow属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

基本语法：overflow：auto|hidden|scroll|visible|inherit

;语法说明：

auto，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容；

hidden，内容会被修剪，并且其余内容是不可见的；

scroll，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容；

visible，默认值。内容不会被修剪，会呈现在元素框之外；

inherit，规定应该从父元素继承overflow属性的值。

例如，以下代码设置了类名为div1的层其背景颜色为绿色，高和宽为150像素，超出范围的内容将隐藏起来。

div.div1{background-color:#00FF00;width:150px;height:150px;overflow:hidden;};例2-10CSS的位置属性示例

htmlxmlns=/1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/

titleCSS的