动态HTML教程
- 第二天 |
Taylor
1998.3.9 |
第二页 深入
动态HTML中大多数的内容都要用到<DIV>标签作为容器。(在
串接样式表和CSS定位的规范草案中规定可以将任何对象
定位,但Netscape的浏览器还不支持这项规定。所以你必须
用<DIV>标签作为类属容器),在容器内加入对象然后再
定位。
我们先为本教程中的范例生成一个box。在本教程的范例中
我们将用网猴的一个编辑Tim作为范例中的主角:
<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的
图片,并给它加一点说明:
<img src="http://www.webmonkey.com.cn/
dynamic_html/tutor/day2_2btim01.gif" width="41"
height="79" align="LEFT">
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
的LEFT和TOP选项技将其定位。
<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.
>>
动态HTML教程
第一页 动态HTML教程
- 第二天
第二页 深入
第三页 相对和绝对定位
第四页 学习分层技术
第五页 家庭作业
[第1天][第2天][第3天][第4天][第5天]
本文本站根据《网猴》相关文章改编,版权归《网猴》所有
|