芒果

Google AdSense 广告是鸡肋，还是撤下吧

芒果 — Mon, 06 Sep 2010 00:30:20 +0000

大概六月份的样子，我在芒果上发了一篇文章，标题是 AdSense for Feeds 广告是鸡肋，还是撤下吧，今天我还是要来抨击以下 Google，我了个擦的，搞了一年半，才有 US$21.77 美金，一年主机域名费都不够。

这年头，五险一金，还要给 Google 交保护费，我容易么我。

腾讯首页顶部整屏导航 Bug

芒果 — Sun, 05 Sep 2010 01:58:02 +0000

腾讯首页和淘宝首页顶部都采用了整屏导航。页面主体宽度腾讯用的是 960px，淘宝则是 950px。

当然现在的主流显示器分辨率都在1024 宽度以上。这种情况下这个顶部的导航条没有任何问题。但是如果缩小浏览器窗口，就能发现腾讯这个导航的一个 Bug。当浏览器可视区域宽度小于页面主体宽度（腾讯这里是 960px）时，导航条无法撑开整个页面可视区域。如下图所示：

同样的问题，淘宝采用了 body 上设定背景平铺的方法，防止低分辨率或者浏览器窗口可视区过小引起的 Bug。

body{background:url("http://img07.taobaocdn.com/tps/i7/T1n7JHXfVtXXXXXXXX-120-70.png") repeat-x 0 -44px;}

当然腾讯的做法在 IE6 下没有任何问题，但是 IE7/IE8/Firefox 下都会产生这个古怪的 Bug。简单地试验了下，顶部导航条容器的样式可以这样来写：

margin:0 auto;min-width:960px;

这里的 960px 需要根据实际情况修改为页面主体宽度，保证在支持 min-width 属性的浏览器下缩放不至于撑不开页面。

CSS 中文字体 Unicode 编码方案

芒果 — Fri, 03 Sep 2010 13:42:08 +0000

在 CSS 中使用中文字体通常直接设置字体名称，比如设置字体为宋体：font-family:’宋体’；但因此产生的一个问题是，如果 CSS 编码有误，会导致页面加载后 CSS 中的中文字体乱码，请看下图所示：

通常会采用对中文字体进行 Unicode 编码的方式来解决这个危险的问题。比如字符“宋体”经过 Unicode 编码后为 “\5b8b\4f53″。以淘宝为例：font:12px/1.5 tahoma,arial,\5b8b\4f53; 预选的中文字体是编码后的宋体。

有一种快速获得字体 Unicode 编码的方法，如果你使用火狐的 Firebug 插件，直接在控制台中输入 escape(‘黑体’)，就可以得到黑体的 Unicode 编码，但需要经过处理才可以使用到 CSS 文件中来，请看下图所示：

于此获得到了 “%u9ED1%u4F53″，将其改写为 “\9ED1\4F53″ 即可写入 CSS 文件。

这样或许还是有些小麻烦，那也没关系，芒果这里有一份比较完整的表格，自己查吧。

中文名	Unicode
新细明体	\65B0\7EC6\660E\4F53
细明体	\7EC6\660E\4F53
标楷体	\6807\6977\4F53
黑体	\9ED1\4F53
宋体	\5B8B\4F53
新宋体	\65B0\5B8B\4F53
仿宋	\4EFF\5B8B
楷体	\6977\4F53
仿宋_GB2312	\4EFF\5B8B_GB2312
楷体_GB2312	\6977\4F53_GB2312
微软正黑体	\5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑	\5FAE\8F6F\96C5\9ED1

独立博客圈到底怎么了？

芒果 — Tue, 31 Aug 2010 12:45:41 +0000

离开大学后，已经很少出现在 WordPress 中文论坛等各种站长社区。作为一个还算资深的互联网人士，这个圈子对我来说已经意义很少，每天充斥着各种混乱的帖子，和千篇一律复制来复制去的文章。爆炸式的信息灌输，会让我情绪浮躁。

相比之下，现阶段我更喜欢捣鼓捣鼓博客，折腾是一件有意义而且容易获得快乐的事情。在这里，我有必要就这个芒果博客谈谈我的一些看法。

首先，版权问题。

版权这个问题之前也说过，但处于互联网这个非传统行业，版权显得过于单薄和无力。如果约束条件本身没有效力，即使再伟大，也是白搭。

抄袭是无处不在的，没错，互联网是自由的。你可以随心所欲的使用网上的任何东西而无需付出任何代价。按照芒果现阶段来看，也有过一些转载，但我会尽量保证注明文章来源出处，并给出原文的完整链接。这本身是一种学习的姿态，不是索取或占有。

然而现实往往是与理想相互违背的，我看过太多太多的抄袭案例，太多太多的采集和抓取，已经见怪不该。当版权协议成为一种精神层面的附庸，所有的权利，都是空谈。

另外，在芒果今后的博文中，只会有翻译和原创，不会再有任何转载文章。

其次，垃圾评论。

这或许是广大博客作者最为头疼的问题了。好在 WordPress 有着强大的垃圾评论过滤机制，但也始终抵御不了邪恶的入侵。正所谓道高一尺魔高一丈，再强大的机器也无法战胜漫山遍野的牛皮藓。看看博客后台的 Akismet 统计，截至今日，系统已经拦截了 41,703 条垃圾评论数据，按照芒果博客一年半的时间来算，芒果平均每天要删掉 75.8 条垃圾评论，内容不外乎减肥药、淘宝等等等等诸如此类，其中淘宝这词出现的频率最高最高。

最后，友情链接。

很少主动去寻找友情链接，除非该站点我会经常去逛，或者说内容很有意义。上上那些站长类网站，到处是收购链接和交换链接的帖子，看着头就大。这些小屁孩们，什么时候能安安心心写点东西，安安心心学点东西？越来越多的网站把友情链接移到了内页，这些链接价值究竟有多少？不可而知。但至少对你最初那个提升 PR 的梦想，没什么太大的帮助。

废话说完了，我也不知道在说些什么东西。只是这个博客圈子，越来越失真了。只希望 WordPress 可以越来越好吧。PS: 开发 Typecho 的 Joyqi 同学离开公司去了北京创业，祝愿一下这位素未谋面的同事，也祝愿咱国产的 Typecho 能像 WordPress 一样风光无限。

CSS 边框重叠鼠标悬停效果

芒果 — Thu, 26 Aug 2010 15:11:33 +0000

前几天某个同事的项目中碰到一个边框重叠鼠标悬停效果，要实现鼠标移上后按钮边框换色，但左右两个按钮的边框又是合并在一起的。就像下面这张图片示意：

如果看不明白，请移步参考淘宝搜索结果页面中的“信用”、“价格”两个排序按钮。http://s.taobao.com/search?q=%CC%D4%B1%A6

以三个横排并列的按钮为例：


    A
    B
    C

这个问题的关键在于合并相邻两个容器的边框，视觉上就像表格边框的合并那样，芒果选择使用负 margin 来隐藏右侧边框。鼠标 hover 时如何才能使当前按钮边框呈现出来？其实也很简单，只要给 a:hover 伪类加上 position:relative;z-index:1; 即可。另外，为了修复 IE6 下的定位问题，建议给每一个 a 元素添加 position:relative; 属性。样式代码如下：

.grid{display:inline-block;}
.grid a{float:left;border:5px solid #cdcdcd;margin-right:-5px;position:relative;width:50px;height:50px;line-height:50px;text-align:center;}
.grid a:hover{border:5px solid #31b1fc;position:relative;z-index:1;}

最终效果如下。因为子节点浮动，外层最好能清除浮动，清浮动的方法请猛击此处查看：http://www.mangguo.org/mangguo-teach-you-clear-float

另外，芒果还想到一种形如九宫格的 CSS 实现，代码也很简洁。

详情参考这份 DEMO 稿：http://www.mangguo.org/example/border_collapse_hover.html

一个搞怪的 404 错误页面

芒果 — Wed, 25 Aug 2010 16:21:10 +0000

搞怪的 404 错误页面会给人出人意料的感觉。

一直想给芒果搞个出彩的 404 页面，却碍于设计能力受限。前几天看了看我们牛逼闪闪的视觉设计师龙城同学的 404 页面，被雷了一下。看看下面的这张截图，像不像 Windows 系统的经典蓝屏界面？

也没啥好点评的，就是想拿来分享下。如果有兴趣，你可以打开演示页面后直接另存到本地。

演示地址：404.html

CSS3 Media Queries，媒介设备查询

芒果 — Wed, 18 Aug 2010 16:13:35 +0000

CSS2 允许通过 media 属性为不同媒介设备（如屏幕、打印机）指定专用样式表，而 CSS3 通过 media queries 使得更为行之有效。你可以为媒介类型添加某些查询条件用以检测设备，并采用不同的样式表。例如，你可以有一个大屏幕显示器的专用样式和一个移动设备的专用样式。这将非常强大，因为它允许不同的设备使用不同的界面外观，但并不改变你的文档内容。阅读这篇文章来了解一下国外已经良好应用 media queries 的网站案例。

CSS3 Media Queries (演示稿)
点击这个演示稿并且缩放的你浏览器窗口尺寸，观察页面元素的动态变化。

最大宽度

如果可视区域宽度小于 600 像素，以下 CSS 将被应用。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

如果你想要引入独立的样式表，可以在标签对之间插入以下代码行。

最小宽度

如果可视区域宽度大于 900 像素，以下 CSS 将被应用。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

多媒介查询

你可以组合多个媒介类型查询，如果可视区域宽度介于 600 像素至 900 像素，以下代码将被应用。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

设备宽度

如果设备最大宽度为 480 像素（如 iPhone），以下代码将被应用。注：最大设备宽度意味着设备的实际可视面积，最大宽度意味着可视区域面积。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

iPhone 4 专用

以下代码为 iPhone 4 专用。（案例：Thomas Maier）

iPad 专用

你也可以使用 media queries 来检测 iPad 上横向纵向坐标。（案例：Cloud Four）

Internet Explorer 的 Media Queries 解决方案
不幸的事，Internet Explorer 8 或更早的版本并不支持 media queries。你可以使用 JavaScript 来弥补这一缺陷。以下是几个解决方案：

1、CSS Tricks – using jQuery to detect browser size
2、The Man in Blue – using Javascript (这篇文章写于六年前)
3、jQuery Media Queries Plugin

案例站点

你必须在支持 media queries 的高级浏览器如 Firefox、Chrome、Safari 中浏览以下站点。看看随着窗口尺寸改变时，这些页面布局是如何响应的。

Hicksdesign

大尺寸： 三栏式侧边栏
小尺寸： 两栏式侧边栏（中间栏沉入左侧栏）
更小尺寸： 一栏式侧边栏（右侧栏移至 Logo 右方）
最小尺寸： 没有侧边栏（Logo 和右侧栏移至顶部，另一个侧边栏移至底部）

Colly

根据浏览器可视区域的尺寸，布局在一栏式、两栏式和四栏式之间切换。

A List Apart

大尺寸：导航在顶部，一排图片
中尺寸：导航在左侧，三列图片
小尺寸：导航在顶部，Logo 没有背景图片，三列图片

Tee Gallery

这个和上述 Colly 案例非常相似，但是不同之处在于 Tee Gallery 中的图片会随着窗口尺寸变化弹性地自适应。这里的技巧是使用百分比宽度，而不使用固定像素宽度。

总结

请记住：拥有优化过的移动版样式表并不意味着移动版网站的优化。真正的移动设备优化，图片和标记语言也必须被缩减到最小，Media queries 目的是为设计表现，而不是优化。

英文原稿：CSS3 Media Queries | WebDesignerWall
翻译整理：CSS3 Media Queries，媒介设备查询 | 芒果

口碑 UED，我的地盘听你的！

芒果 — Sun, 15 Aug 2010 10:05:32 +0000

有不知道口碑网的同学吗？那先阅读一下我们的成长史吧。

UED 资源紧缺啊！这句话恐怕在口碑是最常被提及的。既然如此，我就担起这个伯乐的职责吧，哇咔咔。

口碑网 UED 是一个灰常牛逼的团队，为什么呢？有了牛逼的领导和牛逼的同事，就是这么自信。你如果想搞前端，可以事先看看三七大大写的这篇《如何做好一份前端工程师的简历？》；你如果想搞视觉（这是我们最紧缺的职位）、交互、用户研究，也赶紧拿着简历扑面而来吧。你如果想搞 MM，我们团队更有着品质优良的美女同事，绝对让你很 Happy~~~当然任何条件都不是硬性条件，只要你够给力，这些仅仅是参考的标准而已。

我们对职业技能的要求（前端）：

1、HTML、CSS、JavaScript/ActionScript 等
2、Web 标准、可用性、可访问性
3、一门非前端脚本的语言 (PHP、Perl、Ruby等)
4、任何有利于前端开发的技能和兴趣

其他废话也就不多说了，你懂的。只要你有才，别犹豫，别彷徨。赶紧拿起你手中的电话，拨打 0571-xxxxxxxx 联系我们吧，开放的口碑 UED 将给你不一样的工作经验，不一样的用户体验！

立刻发简历给芒果：bangyan^[at]taobao.com 或 webmaster^[at]mangguo.org 或 tinyhill^[at]qq.com

如果是漂亮 MM，我会更加乐意帮你解答哦。

芒果升级到 WordPress 3.0.1 简体中文版

芒果 — Sat, 14 Aug 2010 17:12:48 +0000

说实话我等 WordPress 3.0 等了已经几个月了，结果却是 3.0.1 出来了。敲锣打鼓贺喜一下赶紧升级到最新版本，哥是喜欢尝鲜的人。好吧，废话不多说，想升级的赶紧升级。

另外，这个八月，芒果博客一周岁半，更新了一下“关于芒果”这张页面。我希望这是一个句点，也希望是一个崭新的起点。

如果你还不了解 3.x 版本，看看芒果以前的文章吧：

WordPress 3.0 发布，就差中文版了
 升级 WordPress 3.0 的几个注意事项
 开启 WordPress 3.0 多站点功能

33+ 清新时尚的创意字体设计

芒果 — Thu, 12 Aug 2010 17:15:08 +0000

合适的字体对设计来说至关重要。正确选择字体往往能使简单的设计出人意料。虽然在线可以下载到各种各样的字体，但总有一些特定的需求，来诠释品牌和其他新用途。
这篇 33+ 清新时尚的创意字体设计中提到的字体，都是可以免费下载的，享受它们吧。

Nobile Font

芒果

Google AdSense 广告是鸡肋，还是撤下吧

推荐阅读

腾讯首页顶部整屏导航 Bug

推荐阅读

CSS 中文字体 Unicode 编码方案

推荐阅读

独立博客圈到底怎么了？

推荐阅读

CSS 边框重叠鼠标悬停效果

推荐阅读

一个搞怪的 404 错误页面

推荐阅读

CSS3 Media Queries，媒介设备查询

推荐阅读

口碑 UED，我的地盘听你的！

推荐阅读

芒果升级到 WordPress 3.0.1 简体中文版

推荐阅读

33+ 清新时尚的创意字体设计

推荐阅读

WordPress 小贴士，关闭所有日志引用通告

推荐阅读

第 2 期 WordPress 主题集锦

推荐阅读

40+ 启发灵感的博客设计

推荐阅读

Firefox 下的亦歌音乐盒插件

推荐阅读

在 WordPress 摘要中显示阅读更多链接

推荐阅读

第 1 期 WordPress 插件集锦

推荐阅读

如何过滤 WordPress 搜索结果页面

推荐阅读

第 1 期 WordPress 主题集锦

推荐阅读

Minify，合并压缩 JavaScript 和 CSS 文件

推荐阅读

不想更新，真的不想更新

推荐阅读