DIV + CSS 到底是什么意思?

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

(0)

相关推荐

  • 如何用DIV+CSS进行网页样式布局

    在html网页编辑中,对于新手来讲,接触最多的就是div+css:那么如何使用div+css就行网页简单布局呢 操作方法 01 一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分:  头 ...

  • Dreamweaver 怎么网页布局 div css布局

    div+css布局已经成为当前网页布局的潮流,通过盒子模型和浮动.定位来控制页面布局比以前的表格布局容易控制多了.如何用Dreamweaver实现div+css网页布局呢.小编为你分享我的. 操作方法 ...

  • div+css网页设计基础教程

    div+css是一个网页设计师,程序员必经之路,是网站建设的基础!div+css是网页设计的最重要的元素. 操作方法 01 一.准备工作,电脑一套,Dreamweaver(网页设计软件) Dreamw ...

  • div+css如何实现背景图半透明文字内容不透明?

    在进行div+css进行页面处理的时候会出现很多问题,特别是在使用背景色的时候,如果图片背景颜色太深不适合做背景.本文从对背景图片进行半透明处理,讲一下css的作用. 操作方法 01 我们这里主要是为 ...

  • div+css制作导航下拉菜单

    div+css制作导航下拉菜单 操作方法 01 首先看如下代码: 02 预览效果: 03 新增如下代码: 04 预览效果如下: 05 发现样式乱了,这是因为新增的li继承了原本的 Float:left ...

  • div+css定位position详解

    div+css定位position详解 操作方法 01 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了d ...

  • div+css怎么布局

    div+css布局现在是主流,能提高网页加载速度,提高后期代码维护效率. 操作方法 01 div 所谓<div>标签我们可以理解为一个盒子. 例如:<div class=" ...

  • DIV+CSS 网页布局常用的书写规范

    DIV+CSS 网页布局常用的书写规范 文件命名规范: 01 全局样式:global.css :框架布局:layout.css :字体样式:font.css :链接样式:link.css :打印样式: ...

  • div+css经典布局教程

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...