catch the digital flow｜北极冰仔部落格

CSS 扫盲教程继续，这是第六期，主讲内容为 CSS 伪类。在与前五期扫盲教程相隔的这么多天中，我也陆续写过不多几篇 CSS 技巧或与 CSS 有关的东西，但最终没有归入这一系列，毕竟技巧归技巧，基础知识归基础知识嘛。——这一段其实全是废话，是我有意安排来凑版面的，下面正式开始：
CSS 伪类：用来给某些选择器或类添加特殊的效果。伪类的语法为：

阅读全文 - 1296 字

在网页上选中一段文字，默认的呈现总是深蓝色背景 + 白色文字。个性，个性哪儿去了？如果你也想换成下面这样，或换得比它们更漂亮，请继续往下看。
我的：

阅读全文 - 564 字

去年（是啊，今天可是 2008 年了，各位写日期时别搞错了啊 - -）写过一篇关于 CSS Sprites 的文章，由于已经有大量的文章写它的原理，我只是敷衍两句罢了。
CSS Sprites 这东西不知道能不能算上是个技术，我觉得充其量也就是个 CSS 技巧。但是当你网站上小图标数量特别多（例子）的时候，这个小技巧却有大用处。CSS Sprites 通过使用一张图片代替所有的小图标以节约 HTTP 连接开销以提高加载速度，再为不同的元素指定不同的 background-position 属性值将小图标分别显示在正确的位置上。更好玩的应用当属刚刚改版的谷歌首页了，下面那活灵活现的动画可不是 GIF 图片，不信你看看背景图，真的只有一张，还不会动：
阅读全文 - 555 字

我最早是在 Realazy 看到 CSS Sprites 的介绍（如果你不知道什么是 CSS Sprites，那么一定要读读这篇文章），紧接着 Zhang-Zi 在自己的阅微堂上应用了这一技术；此时此地，我也把它实现了，（基本上）这里的全部背景图片（虽然也只有几张）都用一张图片包办了，blog 加载的速度显然比之前快了一些。
------ 单薄的分割线 ------
刚才去阅微堂找链接的时候，发现了这篇文章：《加速 blog：序》，对此系列文章充满期待。

我写完 CSS 喜欢用 CSS Tidy（Clean CSS 基于 CSS Tidy 1.1）整理一下，压缩一下体积再上传至服务器（节省加载时间），一直没啥问题。不知咋地今天突然出状况了，修改过的 CSS 再压缩一下之后页面布局变得乱七八糟，左边的 #content 本来是 float:left，可呈现出来偏偏是 float:right 的样式，思来想去我只是改了改正文以外的字体，别的什么都没改，用插件强制清了 WP 的缓存也不行，那问题只能出在 CSS Tidy 身上了，估计是哪个清理选项把代码给改掉了，害我又重新写了一遍 CSS，今后使用 CSS Tidy 之前一定要做个备份。

自 Design Watercolor Effect Menu 后，今天 Nick 又发表了进阶的菜单制作教程：Advanced CSS Menu，按照教程制作出来的菜单果然相当精美，很有 Nick 独特的风格（Demo）。感兴趣的朋友请自行前往学习，我就不翻译了……
PS: Web Designer Wall 的 PageRank 在此次更新中直接由 0 到 7。OTZ...

虽然标题这样写，但实际上使用 JavaScript + DOM/CSS 组合可以实现很多强大的功能。昨天看到 fisio 提到这种鼠标悬停时展开的菜单，我原来也没有用过，经他一提醒觉得还是挺有用处的，尤其在有很多内容的页面上。
废话最后再说，直接给出代码先：
JavaScript
阅读全文 - 610 字

由于更换了新的主题，页面正文的宽度从 540px 缩到了 520px，导致原先一些日志中宽度大于 520px 的图片会把页面撑破，侧边栏掉到正文底下去，页面布局乱得不堪入目。因此，需要让这些超过限制宽度的图片自动缩小以适应当前页面，我摸索了一些方法，写出来抛抛砖。
Firefox 的解决办法
只需要修改 CSS 样式表的一行代码，给正文中的 img 加上 max-width 属性：
阅读全文 - 798 字