div详细用法,举例说明

html-css019

div详细用法,举例说明,第1张

首先要认识DIV是什么,div是HTML标签“<div>”。

DIV用法的语法

<div>内容</div>

div作为html网页中常用的标签,其默认样式是独占一行,其CSS样式需要重新赋予。比如对div宽度、高度等样式设置、内部字体大小、字体颜色都需要通过CSS来实现。

通俗认识div,div作用就是实现布局、实现对内容样式控制、实现各种各样的布局效果。

DIV的用法实例,这里通过对div设置不同CSS样式,观察其效果。

DIV+CSS实例完整HTML源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>div的用法在线演示www.divcss5.com</title>

<style>

div{ margin-top:10px}/* css注释说明:对div都设置上间距10px */

.divcss5-1{font-size:16px}/* 设置css字体大小16px */

.divcss5-2{color:#F00}/* 设置css字体颜色为红色 */

.divcss5-3{ background:#000color:#FFF}/* 设置CSS背景颜色为黑色和字体颜色为白色 */

.divcss5-4{ border:1px solid #F00height:60px}/* 设置css边框和CSS高度60px */

</style>

</head>

<body>

<div>普通内容一</div>

<div class="divcss5-1">我字体大小为16px</div>

<div class="divcss5-2">我字体颜色为红色</div>

<div class="divcss5-3">我背景为黑色字体为白色</div>

<div class="divcss5-4">布局设置边框和高度</div>

</body>

</html>

<div>标签定义 HTML 文档中的分隔(DIVision)或部分(section)。div属于web前端的学习内容,其中<div>标签常用于组合块级元素,以便通过样式表来对这些元素进行格式化。<div>可定义文档中的分区或节(division/section)。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

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

使用 DIV 的方法跟使用其他 tag 的方法一样:

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

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

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

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

ExternalSTYLE tag:使用 External 方法的结果是一样的。请注意在 External 方法里,在 STYLE 里的 ID 和 DIV 里的关系。

扩展资料

布局优势

一、精简代码,减少重构难度。

网站使用DIV+CSS布局使代码很是精简,相信大多朋友也都略有所闻,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话,需手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是使用css+div布局只需修改css文件中的一个代码即可。

二、网页访问速度

使用了DIV+CSS布局的网页与Table布局比较,精简了许多页面代码,那么其浏览访问速度自然得以提升,也从而提升了网站的用户体验度。

三、SEO优化

采用div-css布局的网站对于搜索引擎很是友好,因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题,而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

四、浏览器兼容性

若使用table布局网页,在使用不同浏览器情况下会发生错位,而div+css则不会,无论什么浏览器,网页都不会出现变形情况。

最后,需要注意的是,蜘蛛不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。而同时,若非必须太多花哨的网站,采用CSS布局,同样可以到达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。

div是指块文字,像你要定义一块文字可以用到它。另外做层的时候也经用到它,它就是让一块东西集成为一个集合.

div标签可以以类或ID附加css样式

1.类

<div class="***">……</div>

2.ID

<div id="***">……</div>

如果用id附加,那么css中应该首先创建这个ID:

如:

#abc .font {

font-family: Verdana, "宋体"

color: #FF00CC

}

其中abc就是id

可以在abc这个id下建立很多css属性,这样所有在<div id="***">……</div>这个标签中的内容将遵循abc这个id下的css属性。