学院首页>网页制作>CSS>CSS定位二:空间定位

CSS定位二:空间定位

作者:洪恩 来源:internet 添加时间:2006-5-25 18:21:23
在这一节里,我们来看一个利用z-index定位的例子,这个例子的效果  <html>
    <head>
    <title>zindex</title>
    <style type=“text/css”>
    <!--                   
    .pile{position:absolute;left:2in;top:2in;
    width:3in;height:3in;}//*定义了类pile,以及它的位置*//
    .pile1{position:absolute;left:3in;top:2in;
    width:1in;height:1in;} //*定义了类pile1,以及它的位置*//
    -->
    </style>
    </head>
    <body>
    <img src="/edu/files/pic/2006-5/25/065251821227967.jpg"” id=“image”
     style=“z-index:1”>
     //*导入一张图片,使它为pile类,z-index属性定义为1,位置处于最下方
      *//
    <div id=“text1”
    style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。
    </div>//*定义一段文字的颜色和z-index属性为2,处于中间位置*//
    <img src="/edu/files/pic/2006-5/25/0652518212216391.gif"” id=“image”
    style=“z-index:3”>
     //*导入第二张图片,使它为“pile1”类,z-index属性为3,位置处于最上
      方*//
    </body>
  </html>

  通过这两节的例子,我们可以看到CSS定位具有强大的功能,至于其他的一些定位属性,您可以自己尝试一下,很简单的。
  利用好了CSS的定位功能,会使您的页面更加精致,更加富有动感。
  下一章我将带您进入CSS滤镜的精彩世界

站内搜索