整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端网页制作DIV+CSS布局介绍

么是DIV?
  DIV是层叠样式表中的定位技术,全称DIVision或叫做划分。在网站制作中DIV元素一般是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。当使用DIV+CSS布局的时候, 主要把它当做盒子然后把需要的文字,图像等内容放在DIV标签之中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。所以把它称作“层次”,或者直接就叫一段在 DIV 中的 HTML。

什么是CSS和CSS3?
  CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
  CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器360、chrome、safari、firefox、opera等都支持CSS3绝大部分功能,IE10以后也开始全面支持CSS3了。CCS3可以让使用者能更加快速地访问互联网。在CSS3语言下,不需要图片,仅用文字即可。这让网页的文字在变得越来越漂亮的同时,不会影响浏览速度,并且还能被搜索引擎搜索。
  现在国内用H5+css3做的网站越来越多,功能、交互等都给用户体验带来了很大的提升。在移动端,微信朋友圈的各种H5游戏更是把H5推向了高峰。H5+css3就是发展的趋势。

avascript使用document.getElementById操作div

javascript中经常会操作div,大家在网上看到的各种酷炫的前端效果,很多都是通过操作div来实现的,下面通过实例代码和注释来讲解:

:语法

2:作用

div 标签可以用来划分 HTML 结构,从而配合 CSS 来整体控制某一块的样式。

div 标签是块级元素,它可用做组合其它 HTML 元素的容器。

div 标签可以用作严格的组织工具,如果用 id 或 class 来标记 div 标签,则 div 标签的作用会更加完美。

3:例子

我们以 “坚持就是胜利” 这句话的中英文书写方式为例,看一下 div 是如何划分结构的

首先先看一下编辑器效果,如下

再来看一下浏览器的运行效果,如下

如果我们把 div 标签去掉,只用段落标签 p 来实现,其实浏览器的运行效果是一样的,那我们为什么还要用 div 标签呢 ,这不是多此一举吗?

其实不然,这是在代码量比较少的情况下,两者的差距不明显,但如果代码有成百上千行的时候,就体现到了 div 标签划分结构的作用,同时也使代码更具有逻辑性。

总结来说,div 标签最重要的用途是划分区域,然后再结合 CSS ,针对指定区域进行样式控制。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取

原文链接:https://blog.csdn.net/qq_42351033/article/details/102680545