CSS基础:如何避免table强迫症

白兔子two

白兔子two

2016-01-29 11:42

CSS基础:如何避免table强迫症,table强迫症的一个征兆就是极力避免流布局,希望以浏览器的可视区域为布局目标,要求在可视区域中划分内容区域而不是在页面上划分内容区域,本例讲解了如何避免table强迫症~~

原文链接:http://www.cnblogs.com/cathsfz/archive/2007/03/19/679276.html

上次讲到欲练 CSS ,必先宫 IE,如果你宫了IE然而还是觉得不得要领,那就该怀疑自己是不是有传说中的table强迫症了。

在CSDN社区上,时不时能够看到一些页面整体布局的问题,要求用div做一些table才能做到的,否则就以此为把柄说XHTML+CSS布局方法不好。其实,首先要做的是改变思维,以适应XHTML+CSS的布局。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

面向页面设计而非面向浏览器设计

 XHTML+CSS能够实现的是一种流布局,也就是随着内容的长度自动增长区域,并且最终导致整个页面增长,这时候浏览器就必须显示滚动条。 table强迫症的一个征兆就是极力避免流布局,希望以浏览器的可视区域为布局目标,要求在可视区域中划分内容区域而不是在页面上划分内容区域。实际上 XHTML是无法针对浏览器设计的,因为它仅仅包含语义,或者说是内容,而浏览器如何去表现这些内容是我们无法确定的。CSS提供了我们控制表现方式的一种途径,但这仅仅是针对主流浏览器的,而且浏览器支持的指令集还有稍为的差别(说到这,我真希望能够为一个浏览器写CSS然后编译为全平台兼容代码),最后这些指令暂时还仅仅支持针对页面的流式布局控制。因此,如果你决定要开始写符合语义的XHTML并且仅仅用CSS控制布局,首先就要把思路转变为面向页面(或者说是文档)的布局控制,而非面向浏览器可视区域的布局控制。

接下来肯定有人要说,那你就是承认了有些布局老方法很容易做到,但新方法很难做到啦。这是当然的,然而这不成为我们继续使用table的理由。这时候要反过来探讨原始目标了,我们是为什么要控制布局?低层次的需求是为了美观,谁都希望同样的内容能够以更好的视觉效果展示在用户眼前;高层次的需求是为了控制受众的浏览方式,让他们能够按我们预先设计好的方式来区分页面内容的轻重点,按我们的期望优先浏览某些内容,同时也帮助他们更快的找到他们想要的内容,而不会在我们的网站内感到沮丧。既然我们确定了这时控制布局的目标,那么我们再来看看CSS是不是没办法把事情做好。首先,CSS也能做出美观的页面,虽然某些布局做不到,但是在CSS的限制下做到同等美观程度的页面是肯定没问题的。其次,CSS也能让设计变得友善,不会说CSS的设计就肯定是干净到用户无法一眼找到他想要的功能。因此,虽然CSS无法实现某些特定的布局效果,但对于设计师来说它能够达到老方法所能达到的同等效果,这就足够了。

从XHTML中去掉内容无关的视觉元素

另一个table强迫症的征兆就是,习惯为每一个视觉上的元素对应一个XHTML元素。在table中,无论视觉效果有多复杂,我们总能不停的切割 table,甚至table套table,直到准确定位每一个特定的元素。然而应用了CSS之后,这就是不必要的,甚至会给设计师带来麻烦,因为 XHTML+CSS就是为了内容和布局分离,所以如果一个视觉元素与内容无关,那么它就不应当出现在XHTML中,自然也就不会对应一个XHTML元素。

例如有一个网站当前栏目的徽标,这个徽标没有任何的语义,而XHTML中也有文字内容描述当前栏目了,那么这个徽标就并不一定要对应一个< img /元素。如何让徽标显示出来呢?它可以是当前栏目文字描述区域的background-image,同时通过一些定位技巧让它显示出来。如果你认为有这个徽标就不需要文字描述时,你还可以通过定位技巧将文字隐藏掉,这样单纯看XHTML或者在不支持CSS的浏览器上就只见文字描述,而在支持CSS 的浏览器中则看见会标。从这个例子,我们可以看得到一个视觉元素不一定要对应XHTML中一个实实在在的内容元素,或者对应一个文本元素而非图形元素。 XHTML包含的是内容,那就不应该包含与内容无关的视觉元素描述,而通过CSS你可以事后增加有关的视觉元素。

又例如:before和:after这两个伪选择器,允许你创建插入在匹配元素前后的元素,这样就能够实现非内容视觉效果仅在CSS中插入。常见的用法包括,插入clear到浮动元素之后以确保父元素的完整包含,又或者是引用语句的前后自动加上引号。事实表明,CSS是很适合于将非内容的元素从 XHTML中分离出来的,因此我们在设计XHTML时就不能够总想着要有什么效果,而应该单纯想着信息的组织形式。

最后,如果要我为table强迫症开处方的话,我还是会选择《CSS Mastery/精通CSS》。看完之后,你自然能够解除上述的烦恼,理解到CSS布局带来的便利,从而选择开始用纯CSS的思维来进行设计。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)
展开更多 50%)
分享

猜你喜欢

CSS基础:如何避免table强迫症

Html CSS布局 Div+CSS XHTML
CSS基础:如何避免table强迫症

强迫症怎么自我 强迫症的治疗

电脑网络
强迫症怎么自我   强迫症的治疗

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

轻微强迫症的表现-如何缓解强迫症?

健康养生 健康常识
轻微强迫症的表现-如何缓解强迫症?

什么是强迫症?强迫症的危害

健康养生 健康常识
什么是强迫症?强迫症的危害

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

轻微强迫症有什么表现?如何缓解强迫症

电脑网络
轻微强迫症有什么表现?如何缓解强迫症

什么是晚睡强迫症 如何治疗晚睡强迫症

电脑网络
什么是晚睡强迫症 如何治疗晚睡强迫症

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

《迷你西游》玩法技巧 关于卡级

《迷你西游》玩法技巧 关于卡级

源码学习:一个简单的日历控件(8)

源码学习:一个简单的日历控件(8)
下拉加载更多内容 ↓