人机交互与界面设计_第4章.ppt

【例2-33】CSS列表属性用法示例。 htmlhead title列表属性用法/title style type=text/css ul.ul1 { list-style:square inside;} ul.ul2 { list-style-image:url(check.gif); list-style-position:outside;} ol.ol1 { list-style-type:upper-roman; list-style-position:inside;} ol.ol2 { list-style:decimal outside;} /style /head bodyh3计算机系/h3 ul class=ul1 ?li计算机及应用99（1）班/li ?li计算机及应用99（2）班/li /ul ul class=ul2 ?li计算机及应用99（3）班/li ?li计算机及应用98（1）班/li /ul h3电子系/h3 ol class=ol1 ?li电子信息工程99（1）班/li ?li电子信息工程99（2）班/li /ol ol class=ol2 ?li电子信息工程98（1）班/li ?li电子信息工程98（2）班/li /ol /body/html * * 4.3 层叠样式表CSS 4.3.4 CSS属性 定位属性 CSS提供用于二维和三维空间定位的属性，它们是top、left、position。 利用它们可以将元素定位于相对其他元素的相对位置或绝对位置。 （1）top、left、position属性 top属性设置元素与窗口上端的距离；left属性设置元素与窗口左端的距离；position属性设置元素位置的模式。top和left属性通常配合position属性使用。 position有三种取值： ·absolute：绝对位置，相对于元素的父元素定位。元素原本所占的空间会关闭。原点在父元素的左上角。 ·relative：相对位置，将元素从正常位置移动到新位置，新位置是相对于元素的正常位置而言，元素的正常位置所占的空间仍保留。 ·static（默认值）：静态位置，按照HTML文件中各元素的先后顺序显示。 * * 4.3 层叠样式表CSS 【例2-34】CSS二维定位属性用法示例。 style type=text/css p { font-size:12pt; color:green; } div { width:200;height:200; background-color:#ddeeff; } div.block1 { position:absolute; top:30; left:50;} div.block2 { position:absolute; top:30; left:300;} div.block3 { position:absolute; top:30; left:550 } img.pos1 { position:relative; top:20; left:20; } img.pos2 { position:absolute; top:20; left:20; } /style body div class=block1 img src=img1.gif p这是一幅鲜花图像。/p/div div class=block2 img class=pos1 src=img1.gif p这是一幅鲜花图像。/p/div div class=block3 img class=pos2 src=img1.gif p这是一幅鲜花图像。/p /div /body * * 4.3 层叠样式表CSS 4.3.4 CSS属性 定位属性 （2）三维空间定位 CSS允许在三维的空间中定位元素，与之相关的属性是z-index，z-index与top和left属性结合使用。z-index将页面中的元素分成多个“层”，形成多个层“堆叠”效果，从而营造出三维空间效果。 z-index的取值为整数，可以为正，也可为负，值越大表示在堆叠层中越处于高层，为0表示基准，为负表示位置在z-index=0的元素之下。 * * 4.3 层叠样式表CSS 【例2-35】CSS三维空间定位属性用法示例。 htmlheadtitle三维定位属性用法/title style type=text/css span { font-size:18pt;} span.level2 { position:absolute; z-index:2; left:100;top: