零基础建站培训介绍

当前位置:

div+css布局是什么意思

div css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的代码定位方式,可实现网页页面内容与表现相分离。

简单来说就是把设计的网页(用ps,fireworks等设计的),用div css布局后,使得页面内容(div)和表现(css)的分离,有利于用户的体验,更是精简了代码。

以前,web工程师通过table进行页面布局(现在Google的picasa等应用还能找到table布局应用的例子),现在页面布局大都推荐div css方式。         所谓的div css是指通过css控制div的布局。其实这儿div可以理解为统称,实际应用的不仅是div,还有p,span,img,table等任意节点的定位都可以通过css来控制。

div+css布局是什么意思

div css在网站制作过程中,有着以下的特点:

  1. 简要对比一下:     1、div css相对于table更为灵活,用table布局,代码臃肿。     2、语义性问题。从语义上来说,table应该只是表格数据的容器,不应该是布局的工具。     3、样式渲染问题。table布局要等内容全部加载完毕后才渲染样式,如果用户网速不好,这样用户体验会很差。

    div+css布局是什么意思

  2. 在WEB前端开发中,HTML,CSS,JS这三家三驾马车分别代表着结构,展示,和交互。 在web1.0的时代,页面的逻辑并不是特别复杂,对用户体验的要求也不是很高,table被大量开发者用来做布局元素,横跨结构和展示两个部分,是很“重”的。但是在如今web前端逻辑越…显示全部

    在WEB前端开发中,HTML,CSS,JS这三家三驾马车分别代表着结构,展示,和交互。

    div+css布局是什么意思

  3. 在web1.0的时代,页面的逻辑并不是特别复杂,对用户体验的要求也不是很高,table被大量开发者用来做布局元素,横跨结构和展示两个部分,是很“重”的。

    但是在如今web前端逻辑越来越复杂,用户体验要求越来越高的情况下,对这三者的解耦是必须的。此时再用table拿来做布局就不太合适了,因为table标签的语言根本不是用来做布局的,而是用来传递数据的。而div css是符合解耦这一思想的,div用来控制布局,css用来控制样式。好处从小了说是整个页面的代码组织结构更合理,耦合度更低,从大了说是更利于前端开发的深度分工和复杂合作。

    div+css布局是什么意思

  4. DIV CSS如其字面意思,就是网页HTML代码主要使用DIV将内容模块化,用CSS控制其显示效果。 好处很多,从前端层面来说,大大减轻工作量,提高工作效率。 从界面布局来将,能够更准确的将页面元素定位,且保证在不同的环境下获得基本一致的效果。 还有比如你说…显示全部

    div+css布局是什么意思

  5. DIV CSS如其字面意思,就是网页HTML代码主要使用DIV将内容模块化,用CSS控制其显示效果。好处很多,从前端层面来说,大大减轻工作量,提高工作效率。从界面布局来将,能够更准确的将页面元素定位,且保证在不同的环境下获得基本一致的效果。

    div+css布局是什么意思

  6. 前端的制作常常会涉及到一个问题,就是定位布局。 按照页面设计图来进行定位的话,在以往是用TABLE的方式,也就是将整个页面当做一张大表格,然后哪个地方需要放置什么元素就在表格里放置那个元素。 CSS 是层叠式样式表,是对HTML元素比如p,h1,还有div之类…显示全部

    div+css布局是什么意思

  7. 前端的制作常常会涉及到一个问题,就是定位布局。
  8. 按照页面设计图来进行定位的话,在以往是用TABLE的方式,也就是将整个页面当做一张大表格,然后哪个地方需要放置什么元素就在表格里放置那个元素。
上一课: 下一课:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • CSS3多栏布局columns (5914 次浏览)
    CSS3多栏布局columns语法:columns: <'column-width'> || <'column-count'>;column-width:用来设置列宽,取值auto和像素值,实际
  • 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现。同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变
  • 响应式HTML网页可以自动适应不同浏览设备而自动变化版面,下面介绍一下怎么制作一个响应式HTML网页的方法和步骤。打开Dreamweaver软件,新建一个HTM
  • 我们学习CSS3视频教程时,做网站经常会看到CSS代码里会有一个ZOOM:1,删除ZOOM:1属性对网页却没有任意影响。那么ZOOM:1到底有什么作用呢?下面就跟
  • 我们在自己建网站时,经常需要用到background属性。我们还可以通过background-size来控制背景图片的尺寸。background-size有几个属性值,常用的是cov
  • CSS常用属性大全 (9188 次浏览)
    什么是CSS?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。在
  • 在自己建网站时,CSS是控制网站各类样式的文件,CSS全部是英文,为了方便学建网站新手使用CSS,下面是学做网站论坛总结的常用CSS英文汉语词汇对照表.
  • 学习了网站制作课程的学员都知道,网站的样式都是受CSS来控制的。下面是控制的CSS样式代码:强制不换行div{white-space:nowrap;}
  • Animate动画名称大全 (51450 次浏览)
    animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡
  • 相对定位(relative)是指在其正常的位置上偏移;使用相对定位时,移动后,它原来占的位置不会被其它元素占用。相对定位的语法:div{position:re