div讲解及使用

1、DIVDIV在编程中又叫做整除，及只得商的整数DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由V标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制,CSS单元的位置和层次-div标签div接口=数字图像数据接口我们都知道，在网页上利用HTML定位文字和图像是一件 用表格标签和隐式GIF图像，即使这样也不能保证定位的精确， 会使显示的结果发生变化。而CSS能使你看到希望的曙光。利用今天我们即将学到的要素的位置，还能将定位的要素叠放在彼此之上，还有.还有Cascadi

2、ng Style Sheets (CSS )是DHTML的基础。CSS用来设定你网页上的元素是 如何展示的。Cascading Style Sheets Positioning (CSS-P )是CSS的一个扩展，它可用 来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS和CSS P。 1.使用DIV标签(div)当我们使用CSS-P的时候，我们主要把它用在DIV (division ) tag上。当你把文字，图像，或其他的放在DIV中，它可称作为“DIV block”，或“DIV element”或“CSSlayer”，或干脆叫“layer。”而中文我们把它称作层次”。所

3、以当你以后看到这些名词的时候，你就知道它们是指一段在DIV中的HTML。使用DIV的方法跟使用其他tag的方法一样：This is a DIV tag .如果单独使用DIV而不加任何CSS-P,那么它在网页中的效果和使用是一样的。但当我们把CSS-P用到DIV中去以后，我们就可以严格设定它的位置。首先我们需要 给这个可以被CSS-P控制的DIV一个ID或说是它的名字。比如说我们给下面这个DIV的名字是truck。给名字的目的是我们以后可用JavaScript来控制它，比如说移动它或改变它的一些性质等等。DIDIV令人心痛”的事情。我们必须使因为浏览器和操作平台的不同CSS属性，你可以精确地设定

4、.你自己慢慢看吧！This is a truck给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第两种把CSS-P应用到DIV的方法。Inline CSS : Inline是最常用的方法。External STYLE tag:使用External细解释这种方法。现在我们主要讨论Inline里的ID和DIV里的关系。This is a truck .Cross-Browser CSS性质：我们这个课程的主要目的是让你写出的网页在讨论那些对俩者都通用的性质。下面这些性质符合由个必须是字母。有This is a truck .方法的结果是一样的。我们会在以后的课程里再详方法。请注意在Ext

5、ernal方法里，在STYLENS4和IE4上都能工作，所以我们主要W3C给出的标准。position决定DIV tag是如何放置的。“relative意思是DIV的位置是相对于其他tag的，而“absolute是说DIV tag的位置是相对于它所在的窗口。left相对于窗口左边的位置top相对于窗口上边的位置width DIV tag的宽度。所有在DIV里的文字或height DIV tag的高度。这个性质很少用除非你想clip给出layer的clipping（可看的见的）部分。义的很准确的方块。你可以用以下的四个值来给出这个方块的在DIV位置和大小。clip:rect（top,right,

6、bottom,left）;visibility隐蔽或展现DIV根据它的值visible hidden； inherit。z-index DIV tag的立体位置。值越大DIV的位置越高。background-color DIV背景的颜色。layer-background-color Netscape的DIV背景颜色。background-image DIV的背景图像。layer-background-image Netscape的DIV的背景图像。 2.绝对定位和相对定位（position）绝对定位:定位属性将是网虫们打开幸福之门的钥匙：H4 position: absolute; left:

7、 100px; top: 43px 这项CSS规则让浏览器将H4的起始位置精确地定在距离浏览器左边 顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上 到下载入浏览窗口。左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设 定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。 使用比例值时，比例值的是相对于母体要素的尺寸。你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图像、QUICKTIME电影等等。相对定位：绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。

8、相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：I position: relative; left: 40px; top: 10px 相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你 停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面 弄得非常乱。除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static是position特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特

9、性，或通过使用float特性来浮动单元可影响单元的定位外，其它均不可以。 3.定位单元的控制（width、height visiblility ）除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视 性。宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定 字符向右流动的限制，即设定要素的宽度。DIV （ position: absolute; left: 200px; top: 40px; width: 150px ）浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限 制在150象素。宽度属性只适用于绝对定位的要

10、素。 你可以使用我们学过的任何一种长度单位， 或使用比 例值设定宽度，html都在里面。Clip层次。Clip可使得DIV显示为一个可以定100象素，距离其比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图像。你可以通过宽度设置人为地拉宽或压缩图像。高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：DIV （ position: absolute; left: 200px; top: 40px; height: 150px ）这里我用了 理论上讲”，因为有些浏览器不支持高度属性。可视性：利用CSS ,你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和 未定位的要

11、素都适用。H4 （ visibility: hidden ）选项：visible使要素可以被看见hidden使要素被隐藏inherit指它将继承母体要素的可视性设置。值inherit为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它 包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的EM单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有EM单元中的文本是可见的。当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围 在一幅被隐藏的图像周围，那么，其显示效果将是文字包围着一块空白区域。此新闻这条属性在编

12、写语言和使用动态HTML时很有用，比如你可以使某段落或图像只在鼠标滑过时才显示。4.单元层次（z-index）特性z-index用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序一一也就是说，后出现单元堆叠在早出现单元的上面。Z-index特性实际上定义同属（sibling ）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正z-index值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元 在上层）。同样，具有负z-index值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也 按取值的大小来定（值大的单元在上层，例如值为-1

13、的单元在值为-2的单元的上面）。该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图像设定z-index。（对于Communicator，最好将标签包在font或标签内，然后将z-index应 用到font或。）5.剪辑绝对定位单元（clip）绝对定位单元可以被剪辑-也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若 要求多媒体页面，这是很有用的。如Netscape Communivator 4和Internet Explorer 4都支持多媒体页面，它们通过文档的脚本接口动态地调整单

14、元周围的剪辑区，从而实线文本 划入”和图像渐显等显示特征。在CSS中，剪辑通过clip特性来控制，这一特性只能用于绝对定位单元，其缺省值为auto ,按单元的外边缘来剪辑单元(实际上等于没有剪辑)。另外，可通过如下表达式设置剪 辑框：clip : rect(top,right.bottom,left) ;其中top、right、bottom和left分别是矩形剪辑框的上边、右边、下边和左边相对于被 剪辑单元左上角的位置。Top、right、bottom和left的值可以为任意绝对或相对长度值(但不能为百分比值)，或者是关键字auto。取值为auto意味着剪辑区域的各边放好以后，被剪辑单元中的任

15、何内容都不会超出这个区域。6.控制单元溢出(overflow )固定绝对或相对定位单元的width和height ,很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用overflow来指定浏览器如何处理溢出：值none(缺省值)允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值clip要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值scroll也同样要求浏览器在单元底部和右边剪辑单元内容(同clip),不过，浏览器应该(如果可能的话)为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。c语言中的div的用法：函数名：div功

16、 能：将两个整数相除，返回商和余数用 法:div_t (int number, int denom);程序例：#include#includediv_t x;int main(void)x = div(10,3);printf(10 div 3 = %d remainder %dn”, x.quot, x.rem);return 0;DIV : 80C51指令除法指令的助记符为DIV只有一条指令DIV AB除法指令的功能是将A中无符号8位二进制数除以B中的无符号8位二进制数，所得商的二进制数部分存于A,余数部分存于B中，并将CY和OV置0。当除数(B) = 0时，结果不定，则OV置1。CY总是

17、清0。例：设(A) = 0FBH (251D ) , ( B) = 12H ( 18D)。执行指令：DIV AB执行结果：(A) = 0DH(商13) , ( B) = 11H(余数I7) , ( OV) = 0, ( CY) = 0div属性div属性color : #999999文字颜色font-family :宋体文字字型font-size : 10pt文字大小font-style:itelic文字斜体育font-variant:small-caps小字体letter-spacing : 1pt文字间距line-height : 200%设定行高font-weight:bold文字粗体v

18、ertical-align:sub下标字vertical-align:super上标字text-decoration:line-through加?h除线text-decoration:overline加顶线text-decoration:underline加底线text-decoration:none ?h除连接底线A所有超连接A:link超连接文字格式A:visited浏览过的连接文字格式A:active按下连接的格式A:hover鼠标移至连接边框border-top: 1px solid black上框border-bottom : 1px solid #6699cc下框border-le

19、ft : 1px solid #6699cc左框border-right : 1px solid #6699cc右框border: 1px solid #6699cc四边框虚线实线DIV网页布局规范的对CSS的类及id命名text-transformtext-transformtext-transformtext-align:right:capitalize首字大写:uppercase英文大写:lowercase英文写文字*右对齐文字*左对齐text-align:center文字置中对齐这些是一些简单的文字效果，可以应用到背景text-align:leftcss的页面中。background-

20、color:black背景颜色background-imagebackground-attachmentbackground-repeatbackground-repeatbackground-repeatbackground-repeatbackground-position链接:url(image/bg.gif)背景图片:fixed固定背景:repeat重复排列-网页预设:no-repeat不重复排列:repeat-x在x轴重复排列:repeat-y在y轴重复排列:90% 90%背景图片x与y轴的位置Web开发者（也就是您）可以通过创建CSS类及id名称并使用这些名称来对div以及其他的页

21、面元素、标签进行标识。对开发人员来说，在命名重新定义XHTML标记（tags）的CSS selectors时，必须保证其与预定义的标记准确匹配，但就类以及id选择器名称而言，则仁者见仁，智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。在阅读了 由Andy Clarke （of Stuff and Nonsense and All That Malarkey ）以及Eric Meyer所撰写的关于CSS类以及id命名规范的系列文章之后，我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。直观命名当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用

22、可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：top-panelhorizontal-navleft-sidecenter-columnright-col这些是CSS以及XHTML类和id的有效命名方式。 这些词汇简单并且能够使人顾名思义， 因此满足了标识页面元素以及相应的CSS样式的需要。但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时， 这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。结构化命名结构化的标记意味着表达方式/位置信息同内容的完全分离一一这其中包括出现在标记（markup ）中的类和id名称。有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content ）以及标记（markup）进行重用。 当你理解这种方式时，很容易就可以发现采用页面位置来