深入剖析析DIV标签的使用

本文向大家描述一下DIV标签的使用，DIV标签称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。

创新互联建站网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、响应式网站开发、行业门户型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，创新互联建站网站制作为客户规划、按需网站建设符合企业需求、带有营销价值的网络建站方案认真对待每一个客户，我们不用口头的语言来吹擂我们的优秀，上千余家的成功案例见证着我们的成长。

DIV标签

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

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

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

使用 DIV标签 （div）

　　当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中HTML。

　　使用 DIV标签 的方法跟使用其他 tag 的方法一样：

　　This is a DIV tag .

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

　　但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它， 比如说移动它或改变它的一些性质等等。

　　This is a truck

　　给层次取什么名字是随意的，名字可以是任何英文字母和数字，但***个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。

　　Inline CSS：Inline 是最常用的方法。

　　External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 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 的背景图象。

网站名称：深入剖析析DIV标签的使用
地址分享：http://www.36103.cn/qtweb/news19/4719.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联