当前位置：首页 -> 网页设计 -> HTML/CSS -> 动态HTML教程（二）

动态HTML教程（二）

时间： 2021-07-31 作者：daque

动静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>  </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>  </style> </head> <body> <div id="tim"> </div> </body> </html>

表露截止:

tim, the hero. webmonkey editor and resident banjo-picker. 你大概会提防到在本例中我运用了对立定位。在对立定位和一致定位中有一个很巧妙但确真实实的辨别。

当你将一个东西用一致定位训令定位时，你本质将其从你的html文献流中抽了出来，将其径直按照网页的左上角的场所举行定位。这种情景下各个东西有大概彼此臃肿在一道。

对立定位并不指按照百分比值或其余某个元素的场所来定位这个元素的场所。它本质吞噬的即是它在这个html文献中的场所，它的定位开始鉴于html页地方的场所，这边是一个例子：

tim, the hero. webmonkey editor and resident banjo-picker.

这两个句子中，单词webmonkey都定位在距左边200像素的场所。第1个句子用的是一致定位，第2个用的是对立定位。提防对立定位的句子中空出了十分于单词webmonkey长度的空间，而一致定位了的句子中没有这个空间，即使我给两个句子都加一个"top"参数值，则你会看到一致定位了的句子将飘在作品的顶部，而对立定位的句子则就在它地方的句子的场所之下：

tim, the hero. webmonkey editor and resident banjo-picker.

此刻咱们仍旧领会了两种定位的各别。咱们作一个小熟习。咱们用css-p作一个网页。试着做网页，而后咱们将创造更搀杂的构造（提醒：你不妨用这个屏幕快速照相中的图象动作网页后台图象来扶助你定位。提防将字体沿用comic sans ms）。

你不妨提防到上头的谁人构造用表格就能很简单地做到。然而串接款式表比表格有一项特殊的上风：分层。

你确定提防到你没辙用表格将几幅图片或笔墨叠放在一道。普遍情景下，即使人们蓄意实行这种功效惟有创造一幅位图，在图片中创造出笔墨或图象叠放在一道的功效，而后将图片放在网页中。

而运用动静html，则不妨运用分层程序将叠放表露各个东西，例：

here is aaron in front of a desk.

here is aaron behind a desk.

在这个例子中，aaron在他的台子反面，aaron的图片开始出此刻源代码中：

<div id="aaron"> <img src="http：//www.webmonkey.com.cn/dynamic_html/tutor/aaron.gif"></div><div id="desk"> <img src="http：//www.webmonkey.com.cn/dynamic_html/tutor/extradesk.gif"></div> 然而即使咱们想让aaron站在台子前方，咱们不妨如许写html代码：

<div id="desk"> <img src="http：//www.webmonkey.com.cn/dynamic_html/tutor/extradesk.gif"></div><div id="aaron"> <img src="http：//www.webmonkey.com.cn/dynamic_html/tutor/aaron.gif"></div> 这种典型的分层在html表示编写。以是搭建动静html网页的本领之一即是将各个东西依照表露的前后档次程序陈设排在表露底层的东西最先列出，而排在表露最表层的东西在源代码程序的结果列出。然而这种办法不确定不出题目。很多功夫象在源代码中的程序和它结果的表露程序必需没有任何联系。而此时就须要用到z-index css属性。

这边是从新创造后的例子。这次的html标识和一道一律，然而东西沿用了昭示的z-index。

aaron has a z-index of 2. the desk has a z-index of 1.

aaron and the desk have an implied z-index.

两个例子的html都是沟通的，但css各别。

z-index不妨是一个恰巧或一个负值（带负值的元素将坐落母体元素的底下），它所形成的表露功效为：即使一个东西的z-index比另一个元素大，则z-index为1时的视觉功效和z-index为2时的视觉功效的辨别十分于1和1000z之间的辨别。

那些定位的基础常识是你搭建跨平台动静html的第1步。来日咱们将进修到动静html的精炼之处以及暂时所受的控制。

来日咱们将沉醉在javascript的神秘魅力中。