知道自己的网站打开很慢, 但没意识到会这么慢, 也许是我使用了很多消耗query的插件, 也许是自己增加了很多js脚本, 再加上K2本身体积与功能的相同程度的庞大… 终于, 慢到无法忍受了.
WinXP + Firefox 2.0.0.4 + Fasterfox, 清空缓存后测试: 加载首页总共消耗时间76.313s.
下午有任务, 完成之后准备把blog提速, 有可能会换成light-weight的主题, 把各个需要js的demo移到独立于blog之外的页面中, 最大程度地精简脚本和图片. 要保证性能至上. 晚上见.

先看一个漂亮的AJAX Slideshows吧! [点击查看demo]
当你有很多照片想在一篇文章中展示的时候, 可能也想使用一个类似这样的Slideshow吧, 其实很简单, 只需要几步就可以把它搬到你自己的blog中咯! 让我们开始吧.

阅读全文 - 901 字

自从上次给侧边栏安装了TabPane后, 我就对此类的网页应用产生了深厚的兴趣, 昨天又把blogroll列表折叠了起来. 今天打算再介绍一个好玩的应用: 基于AJAX的Tabs.
[Demo在这里]
这是如何实现的呢? 说来真不好意思, 我介绍的这几个应用, 代码没有一行是自己写的, 都是把别人做好的东西(Ajax Tabs Content)搬到自己网站上, 就当是抛砖引玉了, 呵呵. 让我们开始吧!
阅读全文 - 1335 字

经常来看 catch the digital flow 的朋友一定发现了, 原先侧边栏上长长的blogroll列表不见了, 取而代之的是一个可以点击折叠/展开的动态列表. 整个侧边栏都因此一下子变得简洁不少.
如果你也想把网页上某些元素折叠起来, 那就继续往下读吧!
此次借助的是一个叫domCollapse的工具包, 它的特点是可以非常简单地实现网页上任意元素的折叠, 而不需要了解JavaScript, 只要在HTML中添加class selector配合CSS就可以实现. (class selector是什么? 参考CSS扫盲(二): syntax)
阅读全文 - 995 字

很多人应该都非常喜欢Google Logo的风格吧，我之前还自己动手PS了一个，可惜技术不好，最终没用几天就换掉了。
现在好办了，也不用担心自己PS水平太菜，直接用生成器吧！Google Logo Maker
只要输入自己想显示在Logo上的字就可以了，不过它的配色方案是随机变化的哦，多试几次挑一个最中意的。好了，看看我的吧，可惜字太多了，hoho

前几天写了如何在XHTML1.1中实现target="_blank"，其实我原先也一直很纳闷为什么这个属性会被规范排除，不过貌似制定此规范的工程师们的理由是：是否将页面以新窗口的形式打开的决定权在浏览者手中，而不是网页制作者。
如果需要在IE浏览器中打开新窗口可以在点击链接的时候同时按下SHIFT键，在FIREFOX浏览器中打开新标签的则是点击链接的时候同时按下CTRL键。
我现在写页面代码的时候，已经不会再添加强制打开新页面的功能了。
阅读全文 - 308 字

最初我并没有注意过我的网页写得是否符合W3C规范, 一次偶然的机会使用Validator后我就有了一种想法, 尽量将网页写得符合最严格的标准, 原来是XHTML 1.0 Strict, 现在是XHTML 1.1. 很多人包括我在内都有一个疑问, 原来target="_blank"的功能现在XHTML 1.0 Strict和XHTML 1.1下如何实现? 虽然我决不赞同所有链接都采用打开新窗口的方式, 但肯定也会有一些链接不希望在当前页面打开.
来看看怎么解决吧, 这需要一段JavaScript脚本:

阅读全文 - 634 字

一直就对本站在IE6下浏览的效果耿耿于怀.
K2主题使用了大量透明背景的PNG图片, 这对更换CSS样式表很有好处, 打个比方, 我现在的背景色是白色, 在主题中使用带有白色背景的图片可以与背景色很好地融为一体, 但是如果我想把背景色换成黑色或者是其他颜色的呢? 那些图片就会带着白色背景的方框显示在非白色背景之上, 显得很是不着调. 而PNG格式的图片好处就在这里, 我可以制作图片的时候就使用透明背景, 不管怎么样换背景色, 都不会出现上述的问题.
但是, IE6不支持PNG格式的图片让人异常头疼, 尤其是我今天又更换侧边栏最上部的RSS订阅图标为透明背景的PNG图片, 透明背景显示出来却带有灰色的背景, 实际效果请使用IE浏览本站, 每篇文章标题下面的发表日期和评论旁边的图标很能说明问题. 自从6月1日重新添加了Google Analytics代码, 报告显示本站有56.48%之多的访问者使用IE浏览器, 并且绝大多数是IE6而非支持PNG的IE7. 所以我想找个方法来让IE6用户访问时也能正常显示PNG图片, 方法倒是不难找, 有兴趣的看这里, 但我却不想采用这个方法, 一来页面已经静态化了, 修改CSS代码后需要重新生成缓存文件, 相当麻烦; 二来与其改动代码去适合IE6, 不如借此机会推广Firefox. 我想, 到现在还没有使用Firefox的用户不是因为Firefox本身有问题, 而是他们的惰性, 是微软捆绑IE浏览器强加给用户的浏览习惯使然, 一旦用户出于某种原因, 从使用Firefox浏览网页中体会到了切实的快感, 想让他重归IE都不愿意. 但这需要我们给更多的用户创造更多的可能接触到Firefox的机会.
阅读全文 - 729 字

转载请注明本文地址：
http://hellobmw.com/archives/css-how-to-insert-a-style-sheet.html
怎样插入一个样式表
阅读全文 - 1438 字

距CSS扫盲(一): Padding半个月后, CSS扫盲(二): Syntax跟大家见面了.
这次的扫盲课程更加基础, 主要内容是CSS的语法构成. 废话不说, 马上开始吧!
一. 简单语法
阅读全文 - 1415 字

声明：此文原载于Mashable!。所有图片的版权都归Mashable!所有。
中文译文版权归catch the digital flow所有，如需转载本文，请注明本文地址
http://hellobmw.com/
阅读全文 - 1177 字

好不容易弄得K2的Vader2有了点样子, 不得不说, 这个style的确很酷, 但是但是...在IE下浏览很成问题.
首先, 首页的My Flickr图片错位.
其次, 所有透明的PNG图片都显示有灰色的背景.
阅读全文 - 251 字

不知道出什么问题了, 昨天顺利通过XHTML 1.1验证的页面今天又完全出错了, 不管我如何改都不能有任何有用的错误提示信息, 大家可以试试. 这个地址, 直接点就验证我的首页.
这么热的天气里遇到这么烦人的问题, 正巧旁边一个师妹嘴里不知道唠叨什么, 自言自语像只苍蝇! 苍蝇! 苍蝇! 苍蝇!! 烦得我想杀人啊!!!
算了, 还是自己认真做一个Theme出来吧!!!
阅读全文 - 186 字

要不是昨日我在别处登录The W3C Markup Validation Service对自己的页面进行了检验, 我还一直以为是自己的代码哪里写的有问题呢, 请看下图, 这是在lab的网络上进行验证得到的结果:

按图上的说明, 是在源代码的96-98行之间有不能识别为UTF-8的字节存在. 但不管我如何修改, 就是不起作用, 并且很可能下一次检测的时候跑到了另外几行, 总之不能通过验证, 每次都是失败, 连其他任何错误信息提示都没有.
阅读全文 - 507 字

说是扫盲文章, 其实我自己就是个被扫对象, 为了学习W3C标准地设计网页, 想到写这个系列的文章当作自己的学习笔记, 不求每篇都写很好, 只求能日积月累, 今天第一篇, 只记一下CSS中的padding.
The CSS padding properties define the space between the element border and the element content. [via]
padding作用很简单也很强大, 它用来定义某元素的内容与边界之间的距离, 它的4个属性分别为top(眉), right(右), bottom(脚), left(左). 距离的单位可以是cm(厘米), px(像素)或者%(相当于封闭高度或宽度的百分比), 距离设为负数是无效的.
阅读全文 - 699 字