CSS-P布局网页
天下维客，你可以修改的网络知识库
| 动态HTML教程 |
| 内容： |
| 动态HTML教程： |
| 问题： |
| 资料： |
在Nadav的DHTML揭密一文中所述，动态HMTL网页利用串接样式表布局，并利用Javascript控制网页元素。实际并不复杂或有很多的规定。我们所需要作的只是要给网页加入样式，能使其运动，并且在两种主要的浏览器中都能正确显示。
- 精通我们将用CSS-P布局网页，这是学习动态HTML的第1步。学习完定位元素之后，我们将接着学习编写使其动态显示的脚本。
- 大多数用于设计和页面布局的程序或文件格式必须现生成box，它们的宽度和高度可以改变，它们还能使你控制将对象叠放在对象之上。CSS-P的原理与其相似，你先用HTML定义一个容器（为了便于具备跨平台应用的兼容性，你最好实用或标签），设置其水平和垂直位置，然后设定哪个对象应该叠放在哪个对象之上。
- 你只需以一种不同的思维角度来思考网页的布局，以后我们将利用Javascript控制你的网页布局。
- 动态HTML中大多数的内容都要用到
标签作为容器。(在串接样式表和CSS定位的规范草案中规定可以将任何对象定位，但Netscape的浏览器还不支持这项规定。所以你必须 用标签作为类属容器），在容器内加入对象然后再定位。[编辑]实例
- 我们先为本教程中的范例生成一个box。在本教程的范例中我们将用网猴的一个编辑Tim作为范例中的主角：
<html><br /> <head><br /> <title>dramatis personae</title><br /> <style><!-- #tim {position: absolute; left: 10px; top: 10px; width: 140px; height: 91px; } --></style><br /> </head><br /> <body><br /> <div id="tim"><br /> </div><br /> </body><br /> </html><br />- 这里是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的图片朝左浮动。
- 实际上是它浮动到了本文所在的表格单元的左边。这是一个 重要的区别。当你将HTML放在一个已经被定位了的之内时，你可以把它看作是放在了一个表格单元中（或者象在其他出版系统之内的制作方法那样）。
- 在支持HTML 3.2以后的版本的网页中，你可以看到文字自动回行：
- 现在这个
标签里已经填充了内容，让我们利用CSS-P 的LEFT和TOP选项技将其定位。<html><br /> <head> <title>dramatis personae</title> <style> <!-- #tim {position: absolute; left: 300px; top: 10px; width: 140px; height: 91px; } --> </style><br /> </head><br /> <body><br /> <div id="tim"> </div><br /> </body><br /> </html><br /> </pre [[category:HTML]] [[category:动态HTML教程]] <!--auto restored by hyw. 2006年6月22日 14:29更新 贡献者：[[User:Wikiman|飞鸟]]-->
