html中的div是什么意思?
cssclass属性<DIV>称为区隔标记。作⽤:设定字、画、表格等的摆放位置。当你把⽂字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或⼲脆叫“layer”。⽽中⽂我们把它称作“层次”。所以当你以后看到这些名词的时候,<DIV>应⽤于 Style Sheet(式样表)⽅⾯会更显威⼒,它最终⽬的是给设计者另⼀种组织能⼒,有 Class ; Style ; title ; ID 等属性,将会于【Style Sheet】⼀节才作详述,这处只介绍⼀个属性设定。
以 <DIV align="center"> 为例:
align="center"
可选值:center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
<DIV align="center"> 的作⽤和居中标记 <CENTER>⼀样,前者是由 HTML3.0 开始的标准,后者是通⽤⼰久的标⽰法。
CSS单元的位置和层次-div标签
我们都知道,在⽹页上利⽤HTML定位⽂字和图象是⼀件“令⼈⼼痛”的事情。我们必须使⽤表格标签和隐
式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显⽰的结果发⽣变化。
⽽CSS能使你看到希望的曙光。利⽤今天我们即将学到的CSS属性,你可以精确地设定要素的位置,还能将定位的要素叠放在彼此之上,还有...还有......你⾃⼰慢慢看吧!
Cascading Style Sheets(CSS)是 DHTML 的基础。CSS ⽤来设定你⽹页上的元素是如何展⽰的。Cascading Style Sheets Positioning(CSS-P)是 CSS 的⼀个扩展,它可⽤来控制任何东西在⽹页上或是说在窗⼝中的位置。请你记住这两个名词● 1.使⽤ DIV 标签(div)
当我们使⽤ CSS-P 的时候,我们主要把它⽤在 DIV(division)tag 上。当你把⽂字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或⼲脆叫“layer”。⽽中⽂我们把它称作“层次”。所以当你以后看到这些名词使⽤ DIV 的⽅法跟使⽤其他 tag 的⽅法⼀样:
<DIV>This is a DIV tag .</DIV>
如果单独使⽤ DIV ⽽不加任何 CSS-P, 那么它在⽹页中的效果和使⽤ <P></P> 是⼀样的。
但当我们把 CSS-P ⽤到 DIV 中去以后,我么就可以严格设定它的位置。⾸先我们需要给这个可以被 CSS-P 控制的 DIV ⼀个 ID 或说是它的名字。⽐如说我们给下⾯这个 DIV 的名字是 truck。给名字的
⽬的是我们以后可⽤ JavaScript 来控制它,⽐<DIV ID="truck">
This is a truck
</DIV>
给层次取什么名字是随意的,名字可以是任何英⽂字母和数字,但第⼀个必须是字母。有两种把 CSS-P 应⽤到 DIV 的⽅法。
Inline CSS:Inline 是最常⽤的⽅法。
<DIV ID="truck" STYLE="styles go here">
This is a truck .
</DIV>
External STYLE tag:使⽤ External ⽅法的结果是⼀样的。我们会在以后的课程⾥再详细解释这种⽅法。现在我们主要讨论Inline ⽅法。请注意在 External ⽅法⾥,在 STYLE ⾥的 ID 和 DIV ⾥的关系。
<STYLE TYPE="text/css">
<!-- #truck {styles go here} -->
</STYLE>
<DIV ID="truck">This is a truck .</DIV>
Cross-Browser CSS 性质:
我们这个课程的主要⽬的是让你写出的⽹页在 NS4 和 IE4 上都能⼯作,所以我们主要讨论那些对俩者都通⽤的性质。下⾯这些性质符合由 W3C 给出的标准。
position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的,⽽“absolute”是说 DIV tag 的位置是相对于它所在的窗⼝。
left 相对于窗⼝左边的位置
top 相对于窗⼝上边的位置
width DIV tag 的宽度。所有在 DIV ⾥的⽂字或html都在⾥⾯。
height DIV tag 的⾼度。这个性质很少⽤除⾮你想 Clip 层次。
clip 给出 layer 的 clipping(可看的见的)部分。Clip 可使得 DIV 显⽰为⼀个可以定义的很准确的⽅块。你可以⽤以下的四个值来给出这个⽅块的在 DIV 位置和⼤⼩。
clip:rect(top,right,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: 100px; top: 43px }
这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置。注意这⾥唯⼀设置了的是左边和顶部,也就说,⽂字将从左到右,从上到下载⼊浏览窗⼝。
左边和顶部属性很直观,左边(left)设定要素距浏览器窗⼝左边的距离,顶部(top)设定距离浏览器窗⼝顶部的距离。设定这些距离时,你可以使⽤所学过的各种度单位或⽐例值。使⽤⽐例值时,⽐例值的是相对于母体要素的尺⼨。
你可以定位什么呢?任何东西!段落、单词、GIF和JPEG图象、QUICKTIME电影等等。
:
使你能精确地定位要素在页⾯的独⽴位置,⽽不考虑页⾯其它要素的定位设置。指你所定位的要素的位置相对于在⽂件中所分配的位置。例:
I { position: relative; left: 40px; top: 10px }
相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进⾏定位。相对定位单元出现在普通的静态定位单元的⾏间,定位时没有把⾃⼰和静态定位单元完全分开。如果你停⽌使⽤相对定位,
则⽂字的显⽰位置将恢复正常。使⽤相对定位除了相对定位和绝对定位,你还可以使⽤static(静⽌)参数值。Static 是 position 特性的缺省值。它的使⽤⽅法同普通HTML中的定位⽅法,不能附加特殊的定位设置。也就是说,除了边距特性,或通过使⽤ float 特性来浮动单元可影响单元的定位外
● 3.定位单元的控制(width、height、visiblility)
除了控制定位单元的左上⾓位置,你还可以控制单元的宽度和⾼度,及单元在页⾯的可视性。
宽度:定位了的要素在页⾯上显⽰时仍然会从左到右⼀直显⽰。利⽤宽度属性就可以设定字符向右流动的限制,即设定要素的宽度。
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
浏览器接到这项规则时,它将⽂字按照规则规定的效果显⽰,还将段落的最⼤⽔平尺⼨限制在150象素。
宽度属性只适⽤于绝对定位的要素。你可以使⽤我们学过的任何⼀种长度单位,或使⽤⽐例值设定宽度,⽐例值指相对于母体要素的⽐例。IE 4中,这项属性还可⽤于图象。你可以通过宽度设置⼈为地拉宽或压缩图象。
⾼度:理论上讲,⾼度应该和宽度的设置类似,只不过是在垂直⽅向上:
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
这⾥我⽤了“理论上讲”,因为有些浏览器不⽀持⾼度属性。
可视性:利⽤CSS,你可以隐藏要素,使其在页⾯上看不见。这条属性对于定位了的和未定位的要素都适⽤。
H4 { visibility: hidden }
选项:
visible 使要素可以被看见
hidden 使要素被隐藏
inherit 指它将继承母体要素的可视性设置。
值 inherit 为缺省值。这使单元继承⽗单元的可见性。所以,如果某⼀段是隐藏的,则它包含的任何⾏间单元也都被隐藏。这⼀继承性可被明确指定的可见性取代。例如,段内的 EM 单元被指定为可见,这时如果该段被隐藏,则段内的所有其它内容都
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论