一、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代码使用说明的更多相关文章

  1. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  2. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  3. 使用纯css代码实现div的“回”字型“叠放”效果

    正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...

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

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

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

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  6. 在div中注入html代码

    直接开始: <div id="content"class="modal-body"> </div> 在angularjs中使用如下代码, ...

  7. DIV+CSS:如何编写代码才能更有效率

    如何编写CSS代码才能更有效率?这是许多网页制作者与开发者都关心的问题.大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更 ...

  8. 实用js代码大全

    实用js代码大全 //过滤数字 <input type=text onkeypress="return event.keyCode>=48&&event.keyC ...

  9. js代码大全

    超级实用且不花哨的js代码大全 事件源对象event.srcElement.tagNameevent.srcElement.type 捕获释放event.srcElement.setCapture() ...

随机推荐

  1. Python的字符串修改报错:TypeError: 'str' object does not support item assignment

    Python中想修改字符串的最后一个字符,使用name[-1] = 'e'来实现,运行后报错. 报错内容是:TypeError: 'str' object does not support item ...

  2. token方法可用于临时关闭令牌验证,

    token方法可用于临时关闭令牌验证,例如: $model->token(false)->create(); 即可在提交表单的时候临时关闭令牌验证(即使开启了TOKEN_ON参数). 大理 ...

  3. Vue-element 的 resetFields of undefined报错

    触发场景:添加表单弹框,当我信息保存成功后会报 [Vue warn]: Error in event handler for "click": "TypeError: C ...

  4. Linux的CentOS上如何安装nginx

    1. 安装nginx前,首先要装好gcc和g++环境: 2. 在centOS上装nginx,需要PCRE.zlib和ssl的支持,出ssl外其他都需要从其官网上下载好,上传至服务器: 3. 接着将上传 ...

  5. 你知道的和不知道的sass

    关于sass,大多数人的认识一个写css的工具而已 其实就是的 但是这个工具的威力你发挥了多少呢... 以下全部都是干货,希望你能用在自己的项目里 定义集合 我们通常是这么定义变量的 $warning ...

  6. Thinkphp5 RCE总结

    thinkphp5最出名的就是rce,我先总结rce,rce有两个大版本的分别 ThinkPHP 5.0-5.0.24 ThinkPHP 5.1.0-5.1.30 因为漏洞触发点和版本的不同,导致pa ...

  7. <每日一题>题目25:快速排序

    ''' 快速排序:分而治之,一分为二进行排序 ''' import cProfile import random def quick_sort(nums): if len(nums) <= 1: ...

  8. eclipse中使用lombok不生效

    eclipse中使用lombok,在实体类中添加@Data后,还是不能调用get.set方法.需要修改eclipse配置 1.将 lombok.jar 复制到eclipse.ini同级目录.下载的lo ...

  9. oracle中准确控制job的下次运行时间(next date)

    用过ORACLE的JOB的朋友也许都能够感觉到它的强大,和JAVA中的quartz有异曲同工之妙,可以少了很多的重复劳动:但是也会有许多问题,就是执行时间段和执行时间比较不容易确定. 这其实都是我们还 ...

  10. dd- Linux必学的60个命令

    1.作用 dd命令用来复制文件,并根据参数将数据转换和格式化. 2.格式 dd [options] 3.[opitions]主要参数 bs=字节:强迫 ibs=<字节>及obs=<字 ...