div讲解及使用_原创文档.pdf

DIV

DIV在编程中又叫做整除，及只得商的整数

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV

的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DI

V标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

CSS单元的位置和层次-div标签

div接口=数字图像数据接口

我们都知道，在网页上利用HTML定位文字和图像是一件令人心痛“”的事情。我们必须使

用表格标签和隐式GIF图像，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同

会使显示的结果发生变化。

而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定

要素的位置，还能将定位的要素叠放在彼此之上，还有...还有你自己慢慢看吧！

CascadingStyleSheets（CSS）是DHTML的基础。CSS用来设定你网页上的元素是

如何展示的。CascadingStyleSheetsPositioning（CSS-P）是CSS的一个扩展，它可用

来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS和CSS－P。

●1．使用DIV标签（div）

当我们使用CSS-P的时候，我们主要把它用在DIV（division）tag上。当你把文字，

图像，或其他的放在DIV中，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或

干脆叫“layer”。而中文我们把它称作层次“”。所以当你以后看到这些名词的时候，你就知道它

们是指一段在DIV中的HTML。

使用DIV的方法跟使用其他tag的方法一样：ThisisaDIVtag.

如果单独使用DIV而不加任何CSS-P,那么它在网页中的效果和使用是一样的。

但当我们把CSS-P用到DIV中去以后，我们就可以严格设定它的位置。首先我们需要

给这个可以被CSS-P控制的DIV一个ID或说是它的名字。比如说我们给下面这个DIV

的名字是truck。给名字的目的是我们以后可用JavaScript来控制它，比如说移动它或改变

它的一些性质等等。

Thisisatruck

给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有

两种把CSS-P应用到DIV的方法。

InlineCSS：Inline是最常用的方法。Thisisatruck.

ExternalSTYLEtag：使用External方法的结果是一样的。我们会在以后的课程里再详

细解释这种方法。现在我们主要讨论Inline方法。请注意在External方法里，在STYLE

里的ID和DIV里的关系。

STYLESTYLE

!--#truck{stylesgohere}--

/STYLE

Thisisatruck.

Cross-BrowserCSS性质：

我们这个课程的主要目的是让你写出的网页在NS4和IE4上都能工作，所以我们主要

讨论那些对俩者都通用的性质。下面这些性质符合由W3C给出的标准。

position决定DIVtag是如何放置的。“relative”意思是DIV的位置是相对于其他tag

的，而“absolute”是说DIVtag的位置是相对于它所在的窗口。

left相对于窗口左边的位置

top相对于窗口上边的位置

widthDIVtag的宽度。所有在DIV