绝对定位才是WEB的精髓

所属分类: 网页制作 / CSS 阅读数: 1299
收藏 0 赞 0 分享
若是你从未碰到过此问题,并且非得用纯CSS来实现,我想你一时半了也是束手无策吧。这里不讨论如何实现的细节,网上关于此问题的解决方法也是层出不穷,但都有共同点:复杂取巧

      且不论纯CSS的实现是否有意义,光是其CSS的代码就违背的HTML的思想:用简单的方法实现复杂的效果。这里的简单不仅仅是指代码上的简短,更重要的是体现一种容易实现的解决方案。显然,先前提到的方案里,用纯CSS是最不容易实现的。当然,你已有现成的例子或许更加简单,但更多的时候面对的是一些从未经历过的问题,如果非得用纯XXX实现的话,岂不是事倍功半。事实上,HTML里包含的每个特征都是为了简化开发者的工作量而设计的。CSS,JS,Flash。。。以至于未来的HTML5,新的特征不仅仅是为了丰富内容,更多的是为了简化原先的实现!

      仍旧是垂直居中的问题,我们抛弃纯CSS,用JS辅助CSS实现,会发现总体代码并没有增加多少;相反,每条每句都是那么容易的理解,完全可以抛弃那一堆hack,以及一些晦涩的,没有注释根本没法琢磨的CSS代码。最终呈现在用户眼里的都是一样的效果,又何不选择一条实现简单容易的方法,而要走崎岖不平的山路呢?

      有些人认为纯XXX的实现是一种水平的体现,我认为是完全错误的观点。你用纯css制作了各种各样的特效,说明这方面积累的比较多,你需要了解每个浏览器的怪异特征,并逐一测试,还需不时的关心浏览器升级过后这些特征是否发生了变化。然而,配合利用JS来实现,其解决方法就要简单明了的多。

      且不论渲染效率谁快谁慢,光是开发效率后者要高的多,即便是渲染要慢些,那也仅仅是忽略不计的那一丁点(事实上是不会比纯CSS的慢)。此前也常常在网上看见不少人发帖提问,XXX效果用纯CSS怎么实现。大家于是开始琢磨,但不是这个浏览器有问题,就是那个浏览器不兼容。最后终于出现正确答案,一大堆乱七八糟的CSS,甚至还加了无用的元素,仅仅是为了影响周围一些变化。大家看了也是一知半解,但测试了下的确可以,于是纷纷发帖佩服,表示高深,很强大。

      然而,回过头仔细想想,把各种浏览器的怪异现象利用的淋漓尽致,究竟是一种高明呢,还是一种退步?在过去,IE独占天下的时候,WEB的开发时一件很轻快的事,因为即使我们不按标准去做,但只要IE里运行正常就可以了。那个时候应该有不少和我一样,连document.getElementById这样基础的东西都不知道,因为IE里不需要。与其说是WEB开发,不如说是IE开发。然而,随着各种浏览器的不断冒出,WEB开发已不再像过去那样轻快了,相反是件头疼的事,我们需要花大量的时间在与内容毫不相干的事上,甚至连总结差异也成了WEB开发的一部分。每个浏览器虽然大致相同,但细节方面却各有所异。过去IE的页面在其他浏览器里或许变得支离破碎,原因也很简单,无非两个:1.我们本来就没有按照标准去做,2.其他的浏览器没有严格按标准去实现。

      说到底,WEB的最终释义无非就是“标准” 二字。若是所有的的浏览器都遵循标准所有的开发者也都按照标准开发,那么就能实现“一次开发,到处浏览”。虽然后者可以做到,但是前者是几乎是不可能的,至少在近几年里。更何况如今为了制作与众不同的效果,几乎是挖遍了每个浏览器私有的特效,这对WEB一统就更困难了。正因为出现了如此的局面,也成就了如今大红大紫的Flash,以至于越来越强大。因为它的确是做到了“一次编译,到处运行”的理念。

       用最简单的办法,让各个浏览器表现出一致的布局特性,无疑就是用绝对定位。曾有人说过,用绝对定位做网页的不是最菜的就是最高的。新手不了解CSS复杂的布局特征,于是把所有的都变成了绝对定位,方便在编辑器里拖来拖去,想放哪就放哪。当然这样出来的HTML是极度臃肿的,灵活性也是相当的差,但是惟独有一个优点:所有的浏览器里都是一致的布局。随着新手慢慢成长,也开始熟悉使用CSS主流的布局,以至到了跨浏览器里测试的那天,才发现要兼容所有的浏览器是何等的麻烦。然而绝对定位也是最高端的,因为它配合脚本可以实现丰富的效果,Google的个性化首页,QQ空间的可拖动项目栏。。。越来越多的创意布局展现出来,无不用到了绝对定位。我也曾经考虑过,通过脚本让整个网站都是由绝对定位元素构成,这样显然是可以大量减少累赘的布局代码,服务器仅需提供脚本文件和内容数据,让客户端自己来生成,甚至是一个门户网站。当然,这个想法似乎是夸张到了极点。

       不过即便是用经典的DIV/CSS做网页,也不代表绝对定位的不可行。对于局部的一些效果,用了绝对定位就会比纯CSS实现的简单多了,兼容性也更好了,就是用到了脚本,但这算是一个不完美吗?为何非得为了一个纯理念而在一棵树上吊死呢? HTML的本质就是:最简单的方法实现它。(2011/3/13)

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多