div代码大全 DIV代码使用说明

  一、DIV代码语法 - TOP

  DIV代码是放入小于与大于符号内,即“<div>”。

  DIV是一对闭合标签,即“”开始,“结束”的盒子标签。

  语法结构:

<div>我是内容</div>

  说明:div代码有开始就要必须有闭合。使用“<div>”开始,“/div”闭合。

  二、DIV嵌套DIV - TOP

  div标签内可以嵌套无限级DIV。

    <div>单独DIV</div> 

    <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div> 

  单独DIV

  以上代码,单独div代码也可以,DIV内嵌套DIV也是可以的。

  DIV嵌套div非常普遍的布局,也是不可避免的,常见DIV+CSS布局大框架DIV里内就嵌套若干DIV盒子,若干DIV盒子再嵌套更下的DIV盒子,实现各种各样网页布局。

  我们把最外层的DIV比作一个房间,而房间里有装物品各种大小盒子,大小盒子里还可以装小盒子,而这些大大小小盒子我们可以看做DIV,所以从空间想象来理解这个嵌套是允许的这样就比较好理解。

  三、DIV布局结构 - TOP

  一般DIV用于布局网页结构,比如上下结构、左右结构、更复杂综合的结构我们使用DIV来布局。除了使用DIV布局大结构,小结构而外,对应设置各种各样CSS样式即可实现各式各样漂亮美工布局。

  四、div中style使用css代码 - TOP

  div中可以直接写CSS样式代码,只需要DIV代码(标签)中使用style属性即可直接写CSS样式。

  案例:

  1、DIV代码:

<div style="color:#F00;border:1px solid #000;width:300px;height:100px">你好 DIVCSS5</div>

 

   2、完整案例代码与效果截图

  

  div直接写css截图

  3、完整HTML案例代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV直接写CSS DIVCSS5案例</title>
    </head> 

    <body> 

    <div style="color:#F00;border:1px solid #000;width:300px;height:100px">你好 DIVCSS5</div> 

    </body>
    </html> 

  以上HTML代码可以直接拷贝使用后浏览器观察效果。

  五、DIV中id与class - TOP

  在DIV标签中使用id或class设置CSS样式表。

  div内id与class使用示范:

  

    <div id=”header”></div>
    <div class=”box”></div> 

一、DIV代码语法   -   TOP

DIV代码是放入小于与大于符号内,即“<div>”。
DIV是一对闭合标签,即“<div>”开始,“</div>”结束盒子标签。

语法结构:

  1. <div>我是内容</div>

说明:div代码有开始就要必须有闭合。
使用“<div>”开始,“</div>”闭合。

二、DIV嵌套DIV   -   TOP

div标签内可以嵌套无限级DIV。

  1. <div>单独DIV</div>
  2. <div class="box">
  3. <div class="left"></div>
  4. <div class="right"></div>
  5. </div>

以上代码,单独div代码也可以,DIV内嵌套DIV也是可以的。DIV嵌套div非常普遍的布局,也是不可避免的,常见DIV+CSS布局大框架DIV里内就嵌套若干DIV盒子,若干DIV盒子再嵌套更下的DIV盒子,实现各种各样网页布局

我们把最外层的DIV比作一个房间,而房间里有装物品各种大小盒子,大小盒子里还可以装小盒子,而这些大大小小盒子我们可以看做DIV,所以从空间想象来理解这个嵌套是允许的这样就比较好理解。

三、DIV布局结构   -   TOP

一般DIV用于布局网页结构,比如上下结构、左右结构、更复杂综合的结构我们使用DIV来布局(DIVCSS5在线VIP教程也提供有基本结构布局图文教程)。除了使用DIV布局大结构,小结构而外,对应设置各种各样CSS样式即可实现各式各样漂亮美工布局。

四、div中style使用css代码   -   TOP

div中可以直接写CSS样式代码,只需要DIV代码(标签)中使用style属性即可直接写CSS样式。

案例:
1、DIV代码:

  1. <div style="color:#F00;border:1px solid #000;width:300px;height:100px">你好 DIVCSS5</div>

2、完整案例代码与效果截图


div直接写css截图

3、完整HTML案例代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>DIV直接写CSS DIVCSS5案例</title>
  6. </head>
  7. <body>
  8. <div style="color:#F00;border:1px solid #000;width:300px;height:100px">你好 DIVCSS5</div>
  9. </body>
  10. </html>

以上HTML代码可以直接拷贝使用后浏览器观察效果。

五、DIV中id与class   -   TOP

在DIV标签中使用id或class设置CSS样式表

div内id与class使用示范:

  1. <div id=”header”></div>
  2. <div class=”box”></div>

六、div内id与class具体用法与教程可查看以下相关div css文章:   -   TOP

1、id class如何选择
2、id与class区别
3、id与class
4、class与id使用与区别
5、div id
6、div class
7、div属性
8、查看div设置什么样式

div代码大全 DIV代码使用说明

时间: 2024-11-05 16:08:22

div代码大全 DIV代码使用说明的相关文章

css常用代码大全以及css兼容(转载)

css常见的快捷开发代码汇总(长期更新),包括CSS3代码,有一些css效果很顽固,经常会一时找不出解决方案,网络上也有很多的工具和高手提供了具体的浏览器兼容代码,这个页面我今后会经常整理,希望能够帮到重构和正在找这些效果的代码,如果你有更好的实现方案,不妨告诉我,或者你有解决不了的,也不妨告诉我.你想找浏览器兼容写法吗?点CSS浏览器兼容与hack代码(经验汇总,保持最新) Css背景颜色透明(#ddd) 请参考在线版制作 .liter{ filter:progid:DXImageTransf

《代码大全》读书笔记——week4

<代码大全>代码高效规范部分读书笔记 前三周看的是C++/C高质量编程,将全书看完后,为了进一步了解与提高编写的代码的规范性与高效性,更深刻的了解相关知识,因此,我特地挑选了代码大全中与之前所读的C++/C高质量相类似的第八章与第十一章进行阅读,与之前三周所学进行对比,互为补充,加深自己的印象以及理解. 第八章:防御式编程 主要思想:子程序应该不因传入数据错误而遭到破坏,哪怕是由其它子程序产生的错误数据 8.1 保护程序免遭非法数据的破坏 检查所有来源于外部的数据的值:检查子程序所有输入参数的

js实现的div拖动效果实例代码

js实现的div拖动效果实例代码:div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

jQuery实现的div垂直水平居中实例代码

jQuery实现的div垂直水平居中实例代码:在窗口中有一个div元素,下面就介绍一下如何使用jQuery将其设置为水平垂直居中对齐,希望能够给需要的朋友带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&quo

div居中代码 DIV水平居中显示CSS代码

如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto:其两个样式需要配合使用才能实现div盒子的居中显示排版. 首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中. 实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为".div&

div+css通用兼容性代码整理

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */

css实现图片在div中垂直水平居中代码实例

css实现图片在div中垂直水平居中代码实例:让图片在一个元素中垂直水平居中这样的需求在实际应用中还是很多的,下面就通过代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

div垂直水平居中实例代码

div垂直水平居中实例代码:关于让div垂直水平居中的效果太多了,这里就不介绍了,废话不多说,直接给出代码.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>垂直水平居中代码&l

html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下: <a class="banner" href="/schoolFair/registration#nav"> <a href="#abc">点击跳转</a>    <div id=&