乐趣参与

如果要你测量网页某部分的宽度，你会怎么办呢？

我猜，大多数人可能会用QQ的截图功能吧，至少到昨天为止我也是这么干的。可是有些时候会不方便，如没有登录QQ。还有当运行的程序过多时，QQ截图可能还会反应很慢。

刚刚我又遇到了这种状况，可是又实在不想只为了截一下图而登录QQ，于是一通Google之，找到了一个专业量尺寸的软件-pmRuler.

说下pmRuler有哪些优点吧：

• 小巧。.exe文件只有417K，所以运行速度也很快。
• 操作简单。该软件的主界面只是像上图那样的一个透明框，你可以用鼠标在边框上调节大小。
• 没了。这么小的软件真没啥可介绍的了，不过有以上两点就足够可以抛弃QQ截图了。

下载地址：leqcany.com | Dropbox

PS:如果你在量尺寸时要是有"Ctrl + Alt + A"情节，你可以去安装个HotkeyP 来设置其为快捷键。

其实要考虑的问题只有两个：一个是两个栏目直接的间隔线，另一个是鼠标放到栏目上时背景颜色的变化。
我们一个一个来解决。

间隔线其实是由一条颜色为#DDD和一条颜色为#FFF的边框组成，可以由border-left 或者 border-right实现。

.leftborder{ background:#EEE;border-left:1px solid #FFF;}
.rightborder{ background:#EEE; border-right:1px solid #DDD;}

这是所有浏览器都能实现的方法。但如果你用的是Firefox浏览器，那么还有更简单的方法。因为Firefox支持border-colors(详见CSS3.0参考手册),所以你可以直接把两种颜色同时加到一个边框里。代码如下。

.ffrightborder{ -moz-border-right-colors:#FFF #DDD; border-right-width:2px; border-right-style:solid;}

这样就搞定了第一个问题。然后给出第二个问题的代码，我负责解释。

ul{position:relative; clear:both; padding-top:20px;}
ul li{ width:100px;  float:left; list-style:none; text-align:center;}
ul li a,ul li a:visited{position:relative; display:block; text-decoration:none; color:#005A9C;}
ul li a:hover{display:block; background: #FAFAFA; margin:0 auto; width:100%; color:#424242;}

应该都很好理解，重点在于 “display:block;”，这个属性让整个<li>区域的背景都改变的关键，否则只是文字的背景发生变化。

好吧，给出Demo你自己看看就知道了：http://leqcany.com/demo/nav.html

PS: 在Firefox下可看到两个导航栏具有同样的效果。

不知道W3C什么时候改版的，只是今天逛到那就发现变样鸟～  看图：

看过后发现，原来组织性质的网站也能这么漂亮。

然后我又有了一点儿疑问，那些设计牛逼的网站（如Apple,Twitter等）的效果实现起来似乎也不是很难，就像上面W3C的那个网站一样。可是为什 么我们做设计时候总是想不出来这种style呢？或许我们都被background-color和boder-width之类的束缚住了。至少我是这样。 你说呢？