繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 动态HTML教程（二）
- HTML/XHTML教程
- CSS 循序渐进（四）表里春秋
- 精通 CSS 滤镜（五）
- 让css使网页图片半透明
- 实现页面图片阴影特效
- 发现CSS控件的好处
- 用CSS缩写给你的网站加速
- CSS在IE和Nascape的显示差别
- 利用CSS，不通过replace替换标引HTML标记
- 拒绝单调 让网页超链接拥有多姿多彩的下划线
- 对CSS类及id的规范化命名
- 利用css里expression来实现界面对象的批量控制
- 利用CSS控制打印
- 第一章 ＣＳＳ的基本认识
- 第二章 ＣＳＳ的应用方式
- 第三章 ＣＳＳ的应用补充
- 第四章 颜色背景的ＣＳＳ
- 第五章 文字性质的ＣＳＳ
- 第六章 区块性质的ＣＳＳ
- HTML之其他标记
- HTML之链接标记
HTML/XHTML教程 中的 动态HTML教程（二）
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 105 ::
收藏到网摘: n/a
动态HMTL网页利用串接样式表布局，并利用Javascript控制网页元素。
实际并不复杂或有很多的规定。我们所需要作的只是要给网页加入样式，
能使其运动，并且在两种主要的浏览器中都能正确显示。
精通我们将用CSS-P布局网页，这是学习动态HTML的第1步。学习完定位
元素之后，我们将接着学习编写使其动态显示的脚本。
大多数用于设计和页面布局的程序或文件格式必须现生成box，它们的
宽度和高度可以改变，它们还能使你控制将对象叠放在对象之上。CSS-P
的原理与其相似，你先用HTML定义一个容器（为了便于具备跨平台应用的
兼容性，你最好实用<DIV>或<SPAN>标签），设置其水平和垂直位置，然
后设定哪个对象应该叠放在哪个对象之上。
真的很简单，它能象大多数人（尤其那些利用表格定位和布局的人）希
望的那样让HTML发挥功能。你只需以一种不同的思维角度来思考网页的布
局，本教程将重点讲述一些基本的布局技巧明天我们将利用Javascript控
制你的网页布局。
动态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>&
评论 (0) All
