成都创新互联网站制作重庆分公司

如何深入学习DIV标签概念及其用法

这篇文章给大家介绍如何深入学习DIV标签概念及其用法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联成立与2013年,公司以成都网站设计、网站制作、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户成百上千,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。

你对DIV标签的概念和使用你是否了解,DIV标签称为区隔标记,DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的。

DIV标签简介

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

DIV标签称为区隔标记。作用:设定字、画、表格等的摆放位置。当你把文字,图象,或其他的放在DIV中,它可称作为“DIVblock”,或“DIVelement”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一段在DIV中的HTML。

DIV标签应用于StyleSheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织能力,有Class;Style;title;ID等属性,将会于【StyleSheet】一节才作详述,这处只介绍一个属性设定。

范例

以以下内容为例:

align="center"
可选值:center;left;right。决定字、画、表格等居中、靠左或靠右的作用和居中标记

一样,前者是由HTML3.0开始的标准,后者是通用己久的标示法。

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

我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台不同会使显示的结果发生变化。

而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性,你可以精确地设定要素的位置,还能将定位的要素叠放在彼此之上,还有...还有......你自己慢慢看吧!
CascadingStyleSheets(CSS)是DHTML的基础。CSS用来设定你网页上的元素是如何展示的。CascadingStyleSheetsPositioning(CSS-P)是CSS的一个扩展,它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词:CSS和CSS-P。下面四个英文网址提供了详细的关于CSS和CSS-P的文件和解释。

使用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里的关系。 

   

Thisisatruck.

◆Cross-BrowserCSS性质:
我们这个课程的主要目的是让你写出的网页在NS4和IE4上都能工作,所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由W3C给出的标准。
position 决定DIVtag是如何放置的。“relative”意思是DIV的位置是相对于其他tag的,而“absolute”是说DIVtag的位置是相对于它所在的窗口。
left 相对于窗口左边的位置
top 相对于窗口上边的位置
width DIVtag的宽度。所有在DIV里的文字或html都在里面。
height DIVtag的高度。这个性质很少用除非你想Clip层次。

◆clip 给出layer的clipping(可看的见的)部分。Clip可使得DIV显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在DIV位置和大小。
clip:rect(top,right,bottom,left);
visibility 隐蔽或展现DIV根据它的值“visible”,“hidden”,“inherit”。
z-index DIVtag的立体位置。值越大DIV的位置越高。
background-color DIV背景的颜色。
layer-background-color Netscape的DIV背景颜色。
background-image DIV的背景图象。
layer-background-image Netscape的DIV的背景图象。

关于如何深入学习DIV标签概念及其用法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前文章:如何深入学习DIV标签概念及其用法
网页URL:http://cxhlcq.cn/article/jedesd.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部