把小图片都集中到一张大图片中?思路新颖,但效果一般

94smartyahoo的新版网站中,有一个不错的设计,就是把很多小的图标、背景图片都存储到一张大图片中,然后用css控制显示范围来达到“使用”但张小图片的效果。乍一看很不错,但仔细分析后我觉得不见得非常实用,并且看yahoo其他的页面,也并没有广泛应用这种方式,更多的还是切割之后的小图片,集中到大图片的设计也许只是开发测试阶段的权宜之计?

实现方式大体如此(以<a class=”slideshow”为例):首先将大图片定义为背景

.more, .bullet, .audio, .video, .slideshow, .search, #minimantle li, a#editpage, a#editpage.on{ background-image:url(http://us.i1.yimg.com/us.yimg.com/i/ww/thm/1/icons_1.1.gif); background-repeat:no-repeat; }

其中icons_1.1.gif就是一张包含有众多小图片的大图片,其中甚至还留有充分的空余,可能是为了存放修改后的小图标预留的。

然后定义slideshow class背景的位置,当然是指定大图片中小图标的坐标了:

.slideshow{background-position:-3px -151px;}

这样,结合以slideshow为class的object外部盒子模型,在定义了背景及其偏移位置之后,我们就“恰好”只能看见背景图中露出一个完整的小图标。

大体想了一下,这样作的优点有:

  • 文件数量少了,和分散的小文件相比总体积增加并不多,但却减少了访问时对服务器的请求次数,有利于优化速度。
  • 对于开发代码管理来说,大的文件在命名、管理上要更有条理一些。
  • 图标改进更换无须增加新的文件,只需在大图片的预留空处放置,并修改相应css定义即可(妙!)
  • web服务器的log文件会小很多。

但是也存在一些缺点:

  • 在css的盒子模型中,一定要记得“遮住”无须显示的部分,增加了编码复杂度。
  • 不知道有很多这样把大图片作为background的网页,浏览器处理时间和占用内存是否会有明显增加,因为有时即使是不显示出来的内容也要占用系统资源的。

所以综合考虑下来,由于只能使用css遮盖的方式实现显示目的,不能像map那样直接指定坐标范围,所以虽然是借鉴单机软件编程中的一个小技巧,思路比较新颖,但实际效果一般,个人认为不建议在实际开发中使用。

中文排版CSS心得(实例版)

在csdn上看到了meidengyin中文排版CSS心得这篇很实用的文章,就顺手把其中的css实例化了一下,方便在看说明的时候,也能够看到排版的大体效果,放到这里了,有兴趣的可以翻一翻。格式可能不是特别好,大家意会好了。

另外,由于表达注音的ruby和rt标记是ie only的,所以,严格的说我排版的文档不符合xhtml 1.0 strict标准,因为这两个w3c不认识的标记。

[Js]如何取鼠标的当前位置/坐标

一般在Javascript中,我们用event.clientX来取当前鼠标在文档中的坐标,用event.ScreenX来去当前鼠标在屏幕中的坐标。但是,在Mozilla系列浏览器中,直接使用event是不行的,会提示说event没有定义,因此在Mozilla或Firefox中调用时,需要变通一下。

在调用函数的时候,始终传一个event参数进去,在Mozilla中,会将Event对象传进去,而在IE下默认就有Event对象,也不冲突,这个问题就解决了。

以下这个例子就能够在IE和Mozilla中都正常运行。

当前鼠标坐标为:
X:
Y:

源代码:

<pre onmousemove=”DisplayMp(event)” class=”code”> 当前鼠标坐标为: X:<span id=”mp_x”></span> Y:<span id=”mp_y”></span> </pre> <script type=”text/javascript”> <!–//–><![CDATA[//> <!– /** * 显示/隐藏指定的对象(style.display方式) * @param object event 事件,用于捕捉鼠标位置等,可省略 */ function DisplayMp(event) { document.getElementById(‘mp_x’).innerHTML = event.clientX + ‘px’; document.getElementById(‘mp_y’).innerHTML = event.clientY + ‘px’; } // end of function DisplayMp //–><!]]> </script>

另外取到鼠标的坐标,赋值给style.top等属性的时候,后面需要加上单位,不然也会提示错误。下面就是一个正确的例子:

obj.style.top = event.clientX + 10 + ‘px’;

See Also:

Update @ 2007-03-29

如果在js中使用html_obj.onclick = function () { some_action uses Event }这类语法时,如果遇到Event,注意Event最好大写,不然不会生效。

Update @ 2008-05-18

似乎找到最终的优秀解决方法了,首先用一句话解决event对象的兼容性:

if (!e) var e = window.event;

同时在调用函数的时候,如果没有显式传递Event,它会自动赋值。同时还找到取鼠标位置更兼容的方法:

if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
}
else if (e.clientX || e.clientY) {
    posx = e.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
    posy = e.clienty + document.body.scrollTop
        + document.documentElement.scrollTop;
}

结合起来,用jQuery调用的例子:

$("#showhide_svninfo").mouseover(function(e) {
    SwitchDisplay('#svninfo', 'block', e);
});

这样综合下来,兼容性就非常好了。不过本文中的例子我没有再按照这个改,好像在IE下又不灵光了。

参考:Event properties

W3C的css-validator和UTF-8文档的BOM冲突

css-validator是W3C提供的一个工具,用于检查CSS的有效性,是个不错的工具,同样的还有W3C Markup Validation Service,用于检查html、xhtml等文档的格式有效性。

但是在检查一篇文档的时候出现了问题,文档是UTF-8编码,XHTML 1.0 Strict检查已通过,CSS代码采用直接使用“<style type=”text/css”>”写在文档中的方式。在使用css-validator检查的时候出现如下错误:

Target: http://www.fwolf.com/tools/ogame_construction_resource_computer.php Please, validate your XML document first! Line 1 Column 1 Content is not allowed in prolog.

第一行、第一列?这不是xml 1.0的文档声明么?怎么在检查css的时候还用这个?结果一查,可能的原因有两个:

原因一:css-validator架构于Jigsaw——W3C’s Java Server上,而Java或Jsp处理XML文档的时候,无法正确识别UTF-8格式文档的BOM,从而导致错误“Content is not allowed in prolog”。

原因二:在这里看到别人在讨论的,即然XML 1.0的规范BOM是合理存在的,那么相关的XML工具就应该具备识别BOM标记的功能,但css-validator使用的XML Validator是采用ElCel Technology C++ Toolkit编译的,而这个东东可能不能完全识别BOM?

在W3C的bugzilla中也有人提交了这个bug,但似乎讨论也是无疾而终。

由于Windows平台下的一些编辑器,尤其是我使用的Emeditor,在没有BOM的情况下,有时会有些麻烦,所以出于方便维护的目的来讲,我认为BOM还是保留的好。至于css-validator不能识别的问题,就只能期待css-validator进行改进了,目前倒是还可以把css标记粘贴过去进行检查不是?W3C的W3C Markup Validation Service在检查文档,发现文档具有BOM的时候,会出现一个小提示:

Byte-Order Mark found in UTF-8 File. The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

这说明W3C也在改进各类工具对BOM的支持。

至于说了半天,什么是BOM?请看谈谈Unicode编码,简要解释UCS、UTF、BMP、BOM等名词这篇文章。还有GonDa’s Blog上的Unicode、BOM也提到了一些。

另:css-validator以前都是英文版,现在好像改成了自动识别用户语言的版本了,但是我使用FireFox访问首页居然是乱码--文档是GB2312编码,却错误的被识别成了UTF-8编码。总体感觉易用性比W3C Markup Validation Service差远了,尤其是css-validator的中文版,错误提示有点莫名其妙的,还不知道怎么才能使用英文版界面。

div的居中和自适应包含的浮动层的大小

div中内容的居中可以使用

text-align: center;

但这对div本身不起作用,对内部嵌套的div也不起作用,在W3CN捷足先登学用CSS:HTML结构化中查到,原来div自身的水平居中可以使用

margin-right: auto;
margin-left: auto;

就可以了。

另:text-align: center;在IE中可以使内嵌的div居中,但在ns系列浏览器中不行,而上述的margin方法在IE中好像也不起作用。

如果一个层包含了一个浮动层,那么父层的大小不会和浮动层相关联,这在某些情况下不是我们所希望的,解决的方法只能是在浮动层同级代码中增加一个隐藏内容或者是另外一个只占地方的不动的层。参见:Containing Floats

7.15