Loading...

一些CSS小窍门

Filed under: 网站技术 — 江东 @ 2008-08-24 19:42:02 才(7)条评论

CSS兼容是一个很头疼的问题,浏览器太多,有不守规矩的IE6、比较守规矩的IE7和将来不知道怎么去守规矩的IE8,不断进化的IE和多浏览器共存将会给很多web开发者带来新一轮的头疼问题。朋友可能注意到,我前面的浏览器都只提了IE,而没有说FireFox。可能在以前,很多web开发者特别是国内的web开发者根本就没有兼容的这个烦恼,首先他们不关心Firefox,并且那个时候的页面也不是DIV+CSS模式,即使后来DIV+CSS模式流行起来了,他们依然不关心兼容的问题,因为在他们心中就只有一个IE6,需要和谁兼容去?可是如今IE也开始不让他们消停了,这不得不说是一件好事情。首先IE本身的多版本已经让国内大多数开发者开始注意兼容的问题了,而从IE7可以看得出来,微软也慢慢的在向标准靠近,最终解放的还是we开发者。而微软浏览器特有的渲染效果逐渐被淡化也是一个很好的现象,至少我们现在很少看到网页在用vbs脚本了!

cosbeta在业余做网页的过程中也遇到不少的麻烦,然而都能很好的解决掉了,在此过程中,也算是积累了不少的经验,打算在这里写下来,和大家一起分享。

  1. div居中的问题。有这样一个需求,整个网页的宽度是800px,需要将页面居中,如本blog(storyday.com)。可能你会这样解决(为了方便,下面的css代码多直接写在div中,实际使用请自行选择css代码的嵌入方式)

    main

    left
    right

    footer


    用IE打开看,相当完美,可是你用FF打开看看,问题出来了,因为没有float属性的id=page的div并不会自动适应高度,所以#page没有像你希望的那样将left和right都包含进来了,IE7也是如此,那么下面是我常用的解决办法,今后遇到类似的情况可以如此解决,请注意看class=”page”的css代码: (read on …)

google的圆角代码

Filed under: HTML客户端,网站技术 — 江东 @ 2008-04-28 14:45:43 才(8)条评论

不整点圆角怎么能算是2.0呢,所以我在bloggermap的新版设计中全部采用了圆角。下图是正在孕育中的新版bloggermap界面截图
而那个圆角是采用google的圆形背景来作为转角实现的,具体的思路如下图所示: (read on …)

CSS兼容性考虑-如何用css固定位置

Filed under: HTML客户端,网站技术 — 江东 @ 2007-10-14 11:48:00 才(6)条评论

有的时候我们需要将一个div固定在一个屏幕的指定位置,如在使用loading状态条的时候,或者显示在线用户数的时候。需要的是将div显示在网页的中间,顶端或者左下端,并且无论滚动条如何拉动,这个div将始终保持在相同的相对位置。这些要求用css是很可以容易实现的,只需要用到position:fixed这个描述参数即可。和position: fixed;平行的描述语言有 position: absolute; position: relative; position: static;这里主要讲一讲fixed和absolute的区别,fixed表示始终处于同屏幕的一个位置,即使你拉动滚动条,依然会显示在屏幕的相对位置,而absolute则不一样,absolute针对网页的位置进行描述,所以拉动滚动条后有可能会将显示在中部的div拉动到顶端去,因此,下面的一段css将会把div放在屏幕的中央:
#LoadingStatus{
position:fixed ;
top:100px;/*始终距离屏幕的高度是100px*/

/*后面的描述和位置无关,所以后面的例子请大家关注本行之前的描述*/
width:220px;height:20px;
left:50%;
margin:0 0 0 -110px;/* 将div将左端推进一半的长度,这样才能显示到真正的中间 */
border:1px solid red;
}
如果你用这段css去做实验的话,我相信多数朋友看不到应有的效果,原因在于你用的是IE,那个对w3标准支持不完善的浏览器,如果你用firefox的话,应该是没有任何问题的。不过我们得承认现实,毕竟IE的浏览器占据了绝大部分市场,所以必须写出兼容IE的css才行。由于IE不支持fixed,因此,可以针对IE和FF写不同的css,如: (read on …)