当前位置:首页 > 技术知识 > 正文内容

DIV+CSS技术使用技巧_css dive

maynowei9个月前 (09-11)技术知识79


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

相关文章

验证码,除了 12306,我还没有服过谁

为了防止暴力注册或爬虫爬取等机器请求,需要验证操作者是人还是机器,便有了验证码这个设计。本文作者主要介绍了如何使用 Axure 来设计一个动态的图形验证码,一起来学习一下吧。在软件设计中,为了防止暴力...

msf系列篇章之七模块详解,黑客必学

1、 mestasploit有很多模块,一共分为七类那如果是kali中自带的msf,它默认的安装路径是在这里。,然后可以看见它这些模块有些相对应的目录。1)、exploits漏洞利用模块,这个模块通常...

Android之自定义ListView(一)(android 自定义view绘制流程)

PS:自定义View是Android中高手进阶的路线.因此我也打算一步一步的学习.看了鸿洋和郭霖这两位大牛的博客,决定一步一步的学习,循序渐进.学习内容:1.自定义View实现ListView的Ite...

CPU「离奇」飙到 100%!开发者挖出 Linux 内核 16 年老 Bug:这么多年竟无人发现?

【CSDN 编者按】每一次对旧设备的升级都仿佛是一场跨越时代的冒险。本文作者致力于将基于 PXA166 的 Chumby 8 设备从 Linux 2.6.28 版本升级到现代 6.x 版本,然而,在看...

Qt QWaitCondition 的正确使用方法

简单用法QWaitCondition 用于多线程的同步,一个线程调用QWaitCondition::wait() 阻塞等待,直到另一个线程调用QWaitCondition::wake() 唤醒才继续往...

不需安装oracleclient连接oracle数据库方案

在Oracle官方发布ODP.net之前,我们通常使用微软的System.data.OracleClient进行Oracle数据库操作,它的缺点是必须要装Oracle客户端OracleClient,如...