-->动态HTML教程-->2.2 深入

Dynamic HTML

后页 前页
目录
北极星书库
2.2 深入

动态HTML中大多数的内容都要用到<DIV>标签作为容器。(在串接样式表和CSS定位的规范草案中规定可以将任何对象定位,但Netscape的浏览器还不支持这项规定。所以你必须用<DIV>标签作为类属容器),在容器内加入对象然后再定位。


我们先为本教程中的范例生成一个box。



<html>
   <head>
      <title>dramatis personae</title>
      <style>
         <!--
          #tim {position: absolute;
                left: 10px;
                top: 10px;
                width: 140px;
                height: 91px;
               }
         -->
       </style>
    </head>
    <body>
       <div id="tim">
       </div>
   </body>
</html>


这里是box的显示结果(为了辨认的方便,我给它加了一个
红色边框)


 


现在我们有了一个空的box,其ID名称为tim,其位置在距窗口左边10个像素,距窗口顶部10个像素的位置。现在它还没有体现出动态HTML的魅力,所以我们在这个box中填入Tim的图片,并给它加一点说明:




Tim, the hero. Webmonkey editor and resident banjo-picker.


在3.2版本的HTML的网页(即不能支持动态HTML的网页)中,你将会注意到文字一直流到屏幕边缘之外,而Tim的图片朝左浮动。

Tim, the hero. Webmonkey editor and resident banjo-picker.

 


实际上是它浮动到了本文所在的表格单元的左边。这是一个重要的区别。当你将HTML放在一个已经被定位了的<DIV>之内时,你可以把它看作是放在了一个表格单元中(或者象在其他出版系统之内的制作方法那样)。


在支持HTML 3.2以后的版本的网页中,你可以看到文字自动回行:

Tim, the hero.
Webmonkey editor
and resident
banjo-picker.

 


现在这个<DIV>标签里已经填充了内容,让我们利用CSS-P的LEFTTOP选项技将其定位。



<html>
   <head>
      <title>dramatis personae</title>
      <style>
         <!--
          #tim {position: absolute;
                left: 300px;
                top: 10px;
                width: 140px;
                height: 91px;
               }
         -->
       </style>
    </head>
    <body>
       <div id="tim">
      </div>
   </body>
</html>


显示结果:

Tim, the hero.
Webmonkey editor
and resident
banjo-picker.

后页
前页
目录
北极星书库