新版 Twitter 首页更简洁，突出强调了 登录框和注册框，方便用户快速登录或注册。

改版前

改版后

高朋网是由Groupon和腾讯出资组建，注定是个宠儿，一出生就吸引了足够的关注，但关注高朋的群体大多都是IT从业者，而身边普通网民都还没听说过高朋网。

高朋第一次上线仅持续一天，腾讯便把网站服务器的电源给拔了；而第二次上线，也就是现在看到的模样，鄙人实在是不敢恭维现在的页面设计，下面是个人的一些愚见，仅当抛砖引玉。

1. 网站名称不好听

高朋这名字听起来很生硬，还是糯米团之类的听起来舒服，同时也能拉近与网民的距离。

2. 页面跳转没必要

打开gaopeng.com后，页面跳转到http://www.gaopeng.com/gaopeng/lp/gaopeng/gaopeng.php，不知他们是怎么想的.

3. Logo设计的真难看

4. 字体选择搭配真差劲

中文字体一般不适合使用斜体样式，看起来很不舒服。

5. 展示图片选择不恰当

虽然外国女人很漂亮，但这是在中国，而且是大陆，放个外国妞是什么意思呢？

6. 图片无连接

页脚的图片连个链接都不加，放个广告图片好玩吗？

7. 其他页面设计不正式

联系我们 服务条款 隐私申明 页面做的实在是太不正式了。

总之，高朋网 页面设计太仓促，很多细节不到位，我估计高朋网 的页面设计来自一个初出茅庐的设计师之手。

平时一般不用WordPress默认主题Twenty Ten，平时一般也使用IE9浏览器，可是总有例外的时候啊，今天偶然发现Twenty Ten主题在IE9中的一个小BUG—— 页眉图像位置错位。

在IE9浏览器中打开Twenty Ten 主题博客时，页眉图像错位，示例如下

正常的页面应该如下所示才对：

页眉图像位置修正的2种方法

方法1. 修改 style.css 样式表。增加如下代码：

#branding, #branding img{ float:left}

方法2. 修改header.php文件。在header.php中找到下面的代码：

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

在其后面增加下面代码：

<div style="clear:both"></div>

推荐使用方法1，毕竟是关于页面样式的，修改CSS文件，更直观一点。

看看周边的博客和网站，几乎没有不加广告的，我也不例外。不过，看看自己的收入，实在是惨不忍睹啊！

很多站长和博主为了广告提高点击率，不惜铤而走险，看下面这张截图。

解释说明：上面标题部分“软件下载链接地址列表1（点击链接免费下载）”是文字，不是链接，下载链接在右下角，如上图红色箭头所指的区域，我估计一般人找不到下载链接。这明显有违联盟政策，诱导用户点击广告。

广告布局令我很纠结，正常情况下，广告部分应该明确指出，以便和内容区分开，但这样做明显降低了广告点击率，所以，很多时候站长和博主都将广告混在内容里，导致用户分不清这是内容还是光告。

广告如果能作为网站内容的补充当然最好了，比如Google Adsense的广告，能够匹配网页内容，提供与内容相近的广告，但百度就差很远了，常常是风马牛不相及。

我觉得广告布局优化这一块还是相当有难度的，下面是我个人的一些经验总结，希望对你有多帮助。

1. 新站的话，不要过多的想着利用广告来赚钱，往往适得其反。
2. 选择合理的广告位置，重点突出您的广告，具体可参考Google提供的 一站式优化器。
3. 经常变化广告位置，否则容易造成审美疲劳。
4. 采用大尺寸广告，比如 160×600，120×600，728×90，336×280等。
5. 尽量减少广告数量，毕竟内容才是最重要的，否则会造成用户反感。

以上也只是个人的一些愚见，毕竟我没赚着钱。如果你有更好的建议，请给我们留言。

从古希腊哲学家毕达哥拉斯到电影导演达伦·阿伦诺夫斯基，从艺术到建筑的一切领域，你都能发现这个无理性的常量——黄金分割率。最近，显然，它又成为了Twitter新界面的设计理论依据。原文链接

CSS3新增 Multiple Columns 属性，翻译成中文就是多列的意思，利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局方法。

Multiple Columns 有两种设置方法：

• CSS 3 Multiple Columns (Width)：采用列宽来控制
• CSS 3 Multiple columns (Count)：采用列数来控制

CSS 3 Multiple Columns (Width) 使用示例及方法：

示例：

CSS代码：

#CSS3_Multiple_Columns_widht {
//Firefox 浏览器设置方法
-moz-column-width: 200px;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #222;
//Webkit 浏览器设置方法
-webkit-column-width: 200px;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #222;
//通用方法
column-width: 200px; //列宽设置
column-gap: 30px; //两列之间的间隙大小
column-rule: 1px solid #222; //分割样式
}

CSS 3 Multiple Columns (Count) 使用方法：

示例：

CSS代码：

#CSS3_Multiple_Columns_count {
//Firefox 浏览器设置方法
-moz-column-count: 2;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #222;
//Webkit 浏览器设置方法
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #222;
//通用方法
column-count: 2; // 分成的列数
column-gap: 30px; //两列之间的间隙大小
column-rule: 1px solid #222; //分割样式
}

怎么样？效果很酷吧，赶快试一下吧！

网页美工是一个纯粹讲求技术和经验的工作，应尽量掌握更多的特效制作方法，下面是我利用 Illustrator 画的WordPress主题——renniaofei 的缩略图。

源文件下载 wp-renniaofei.pdf

此主题网页美工的一些特点

• 打破常规布局，稍微有点新意。
• 采用红、黑、白 三种对比强烈的颜色。
• 使用投影 渐变效果。

由于这两天肩膀很疼，美工做的比较粗糙，等转到 HTML 时，会尽量做的细腻一点。希望大家多提提建议！

制作此主题的过程记录：

• 任鸟飞首款免费WordPress主题 — 使用说明
• 任鸟飞首款免费WordPress主题 — 正式发布
• 任鸟飞首款免费WordPress主题 — 预览调试
• 任鸟飞首款免费WordPress主题 — HTML和CSS源文件
• 任鸟飞首款免费WordPress主题 — 网页美工
• 任鸟飞首款免费WordPress主题 — 草绘
• 任鸟飞首款免费WordPress主题 — 开发概述

我们都很努力，有时候为一个项目通宵达旦，日夜兼程。我们满心期待，期待我们的网站或博客门庭若市，可很多时候，往往事与愿违，我们辛苦的付出换回来的却是门可罗雀。

从一次次的跌倒中，我们学会了如何更快的站起来。下面就是我每次跌倒后的总结体会，希望你在网站开发过程中有所借鉴。

1. 站在用户的角度考虑问题

作为一名技术人员，往往考虑的专业问题太多，而作为网民，特别是中国的网民，由于整体网民水平比较低，只要满足其基本需求即可。网站不要设计的太复杂，功能不用太多，页面简单明了即可。

2. 网站导航栏设计

首先，导航栏设计一定要突出，让访客一看就知道是导航栏，谁也不愿意花好几分钟的时间在你的页面上找导航链接。

其次，导航栏一定要分类明确，方便访客找到感兴趣的内容，其原则是一步到位。

3. 减少富媒体的使用

所谓的富媒体就是指一些Flash、视频、音乐等，用这些东西一定要控制到恰到好处，尽量减少使用这些富媒体，否则物极必反。

4. 网站上线时间点的选择

网站上线一定要等到所有的页面、功能都开发完毕之后才可以，假使你是访客，你会愿意看到“正在建设”这样的字眼吗？

5. 域名主机

域名的选择还是要本着让人一看域名，就知道这个域名代表什么意思的原则比较好，尽量少用简拼，可以采用缩写的形式。域名注册推荐大家选美国的Godaddy。

主机一定要选择一款稳定的主机，当然速度也相当重要。试想一下，如果你的主机隔三差五的宕机，谁能受到了，世界杯期间twitter的主机就老宕机，让我很生气。

这里给大家推荐一款美国的虚拟主机-Bluehost，任鸟飞网页设计博客就是使用的Bluehost，而且Bluehost是 wordpress 官方推荐主机，值得信赖。

IE6因众多BUG而广受诟病，其对CSS和HTML代码的解析“独树一帜”。IE6本应该寿终正寝，但由于Windows XP依然占据主流，绝大多数用户都会用到Windows XP绑定的IE6，因此在编写CSS代码时要考虑到对IE6的兼容性。

先看一下主流浏览器对 _  *  !important 的支持情况

我们可以利用上面的差异，单独针对IE6编写相应的CSS代码。

符号功能解释：

• _（下划线）：只有只有IE6支持
• *（星号）：只有IE6和IE7支持
• !important：此行定义的属性值不会被后续定义覆盖，拥有最高优先级，IE7以上版本都会支持此属性。

知道_ * !important这三个符号的意义后，就可以编写单独针对IE6的CSS样式代码。

注：在CSS定义中，如果对某一属性有重复定义，则后面定义的属性值会覆盖前面的定义。

实例一 在IE6中使用GIF代替PNG

#logo {
background-image: url(logo.png); /*除IE6和IE7之外，其他浏览器都会使用PNG格式*/
background-repeat: no-repeat;
height: 80px;
width: 290px;
text-indent: -9999px;
}
/*使用 星号 */
* #logo {
background-image: url(logo.gif);  /*在IE6和IE7中，使用GIF图像格式代替PNG*/
}

实例二 兼容IE6的最小高度 min-height 设置方法

.box-min-height {
  min-height:550px;
  height:auto !important;  /*IE6 不支持!important，因此会忽略掉本行*/
  height:550px;
}

利用CSS3的Multiple backgrounds特性可以对某一元素设置多个背景图片，从而避免大量HTML代码的嵌套，降低HTML代码层级。

实现Multiple backgrounds只需要在background属性中设置多个背景路径即可，当然，为了达到期待中的效果，你需要对各个背景图片实行定位。

示例预览：CSS3 multiple backgrounds | CSS3 多层背景

为了实现上面的效果，我们制作了4张图片，分别代表4个位置（左上 右上 左下 右下）。

CSS 代码

background:
    url(right-top-bg.gif) top right  no-repeat,
    url(left-top-bg.gif) top left  no-repeat,
    url(left-bottom-bg.gif) bottom left  no-repeat,
    url(right-bottom-bg.gif) bottom right  no-repeat;

HTML代码：

<div class="multiple-backgrounds">
<h2>CSS3 Multiple backgrounds <br />多层背景</h2>
</div>

下载 css multiple backgrounds | CSS3 多层背景 源代码