DIV代码使用的方法有哪些

这篇文章主要介绍了DIV代码使用的方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇DIV代码使用的方法有哪些文章都会有所收获,下面我们一起来看看吧。

正宁网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。成都创新互联公司于2013年开始到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司

一、DIV代码语法 

DIV代码是放入小于与大于符号内,即“

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

语法结构:

我是内容

说明:div代码有开始就要必须有闭合。
使用“

”开始,“
”闭合。

二、DIV嵌套DIV    

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

单独DIV
       
     
 

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

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

三、DIV布局结构   

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

四、div中style使用css代码   

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

案例:
1、DIV代码:

你好 DIVCSS5

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

DIV代码使用的方法有哪些
div直接写css截图

3、完整HTML案例代码

    DIV直接写CSS DIVCSS5案例     你好 DIVCSS5
   

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

五、DIV中id与class  

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

div内id与class使用示范:

 

关于“DIV代码使用的方法有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“DIV代码使用的方法有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


当前标题:DIV代码使用的方法有哪些
本文URL:http://pwwzsj.com/article/pdejsd.html

其他资讯