新手上路 DIV入门指南

开发 前端
本文向大家介绍一下DIV入门的一些知识,DIV 在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。

你对DIV的概念是否了解, 这里和大家分享一下DIV入门知识,DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

DIV入门简介

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

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

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

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

使用 DIV 标签

  这里看一下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 是最常用的方法。This is a truck .
  External STYLE tag:使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里,在 STYLE 里的 ID 和 DIV 里的关系。  

  1. <STYLE TYPE="text/css"> 
  2.    
  3.   STYLE> 

  This is a truck .

  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入门知识介绍到这里。

【编辑推荐】

  1. 学习DIV float在ff和ie下的布局区别
  2. Div+CSS布局入门教程之页面布局和规划
  3. 深入学习DIV+CSS之绝对定位和相对定位用法
  4. Div+CSS布局入门之写入整体层结构与CSS
  5. DIV+CSS开发过程中影响SEO的制作细节
责任编辑:佚名 来源: baidu.com
相关推荐

2010-07-29 17:11:03

Flex

2010-07-26 11:19:19

Perl入门手册

2010-08-16 09:19:04

DIVCSS

2009-10-22 09:59:50

CLR程序集教程

2010-06-25 15:41:49

IPX SPX协议

2010-05-28 14:25:20

SVN基本操作

2018-10-22 17:57:28

汽车互联

2010-08-23 11:41:13

路由器IOS

2010-08-10 13:52:31

路由器IOS简介

2010-05-26 13:32:16

SVN简易使用手册

2011-06-16 21:39:07

投影机技巧

2010-05-17 17:54:44

Subversion1

2010-05-18 14:06:22

SubVersion和

2010-05-17 18:18:23

Subversion1

2019-03-15 09:34:18

静态资源服务器命令前端

2010-09-09 13:40:19

XML DOM

2010-08-02 09:36:22

Flex

2015-01-12 10:42:02

程序员

2020-05-27 11:16:49

数据科学机器学习Python

2022-05-16 15:37:32

开源软件
点赞
收藏

51CTO技术栈公众号