DIV+CSS技术使用技巧

zhezhongyun 2025-01-01 23:40 53 浏览

一、使用 div 后，什么时候使用 table

Web标准并不排除表格的使用，但使用表格排版是不明智的，因为表格归根结底只是一种显示“数据”的方式。大家应该知道，在 Excel 中，表格就是用来放置数据信息的。使用表格显示信息能让浏览者阅读起来更轻松，表达也更清楚。

XHTML 中的元素可分为三大类，下面分别介绍。

辅助布局设计元素:主要指div、span等，这类元素的主要功能是布局整个页面。灵活使用这些元素，能让网页丰富多彩。

结构化元素或信息元素:主要指table、ul、pre、code等元素，是一种信息显示与整理方式，如 table 是用来显示表格信息的，ul是用来显示列表信息的，当需要用表格或列表的时候，用这两种方式来显示是合理的。

为实现某些功能而添加的元素:如添加关键字的meta keyword，设置链接的a等。由上面的分析可知，符合Web标准的设计思路是，使用div等布局元素来制作页面的布局、定位、色块、图像等，使用table、ul等元素来显示页面中需要展示的数据。这实际上是一个信息合理化整合的过程，什么地方该用什么元素还是照用不误。

二、初学 Web 标准的几个误区

初次接触 Web标准的用户可能会受表格布局或其他一些问题的影响，常见问题及解决建议如下:

1.不要用传统的表格思维来套div

用惯了表格的用户可能会觉得，CSS 布局就是将原来用table的地方用div来代替，原来是 table 嵌套，现在是 div嵌套。这种观点是错误的。

应该跳出表格布局的禁锢，抛弃一个td接一个td放置内容的思维方式。按前文所述，Web标准的目的是将内容和表现完全分离。即在加入表现之前，页面里有的仅仅是内容，在没有修饰的情况下，它就是一张有一些文字和图像(图像是指内容中的图像，是有真正意义的图像，而非修饰性的图像)的简单页面，这些文字和图像仅仅是依次罗列下来，只有结构，没有任何样式。当加人表现，将所有修饰的图像作为背景，用CSS 来定义每一块内容的位置、字体、颜色等时，才构成了一个完整的页面。

这样制作的页面才是内容与表现完全分离的，即抽掉 CSS 文件，剩下的就只是干净的内容。

2.不必为每块内容都创建一个id

内容都是有结构的，相同结构的内容可以用同一个样式来定义，如相同级别的标题、正文、图像等。对干多次引用的样式可以用cass 来定义，不需要全部用id:另外也不是说只能用 div 布局，在需要的时候，完全可以用p来代替。

至于仅仅为了行高、间距，或者一个修饰性图像而增加的div，随着大家对 CSS应用的熟练和理解，很快就会知道这是没有必要的。希望大家多研究 CSS，做出最简练、最有效的样式表。

XHTML 技巧

上一篇：用selenium自动加载浏览器下载图片
下一篇：手机网站建设注意事项及优化技巧

DIV+CSS技术使用技巧

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?