DIV+CSS技术使用技巧

yund56 2025-04-11 01:58 19 浏览

一、使用 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，做出最简练、最有效的样式表。

divcss布局模板

上一篇：CSS:Flex布局，网页排版神器!
下一篇：装修装饰设计网源码

DIV+CSS技术使用技巧

相关推荐

django留言板_留言板html好看的模板

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一次分享给你29个PHP基础常用类助力你快速提升

一篇文章轻松掌握VLookup、XLookup与Filter函数

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

营商在上海_营商上海数字科技有限公司

Excel筛选也智能?一个FILTER函数就搞定!