CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。

1.简单的纯CSS Tooltip

通过这些代码，你可以做出简单的Tooltip。这是CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

a:hover {
	background:#ffffff; /*要兼容IE6的话必须添加背景色*/
	text-decoration:none;
}
a.tooltip span {
	display:none;
	padding:2px 3px;
	margin-left:8px;
	width:130px;
}
a.tooltip:hover span{
	display:inline;
	position:absolute;
	background:#ffffff;
	border:1px solid #cccccc;
	color:#6c6c6c;
}

随着宽屏显示器的流行，越来越多的网站采用了动态宽度的设计，以求页面在宽屏显示器上保持美观（960px的网页在23寸的显示器上只有半个屏幕的宽度）。动态宽度的框架设计比较复杂，今天只说说和屏幕等宽的导航栏的设计。
等宽导航栏(我不知道这个名称合不合适，知道的朋友指点一下)的设计一般要遵守以下两个要素：
1.导航栏的背景和页面的最大宽度相等；
2.导航的内容的位置在页面主框架以内（导航的内容在主框架以外的话不好看，用户体验也不好）。

WordPress是一款成熟的开源CMS平台，新推出的2.9版本依然保持了以往良好的口碑。这篇文章从WordPress 2.9的codex文档里摘录出几个开发者应该留意的功能进行简析。

1.文章缩略图(Post Thumbnails)

WordPress 2.9 一个比较重头的新功能就是提供了不需要自定义字段的文章缩略图功能，这将对使用者提供很大的便利，但由于一些兼容性的限制，你必须对主题的function.php文件进行修改才能使用这个功能。
在主题的function.php里添加如下代码，你就能使用WordPress的文章缩略图功能。

1
2
3

if ( function_exists( 'add_theme_support' ) ) { //检查WP版本是否为2.9或以上版本
add_theme_support('post-thumbnails'); //如果WP版本符合最低要求则添加文章缩略图
}

Google Analytics（谷歌分析）为我们提供了强大的网站统计功能，其中Custom Reports（自定义报告）功能更是为我们扩展统计功能提供了方便。在这里我们探讨一下通过自定义报告功能跟踪用户行为的方法。
Google Analytics的统计代码分为标准统计和异步统计两种，因此我们分开讨论。先看看两种基本的统计代码：

标准统计

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>

随着Twitter、新浪微博、嘀咕等社会化微博客的流行，因为大多数微博客都有字数限制，因此互联网上大部分长长的网址在微博客上变得很不适用，一直以来被人冷落的网址缩短服务又火了起来。
大家可以看个例子，我上一篇文章的网址是http://blog.imbolo.com/the-trends-of-navigation-menus-design/，经过bit.ly提供的网址缩短后变成http://bit.ly/8TP4p0，少了多少个字符大家可以自己数数，由此也可见在必须字字珠玑的微博客上短网址是多么的重要。

WordPress的模板非常灵活，一个优秀的模板所实现的功能往往超出你的想象。这篇文章说说在WordPress里调用文章的发布日期。

前言

今天在一国外网站看到一篇08年的文章，讲的是网站导航栏的设计趋势，写得相当全面，而且其中一些趋势到现在还是很新潮的，翻译一下，有删改。

正文

导航是网站设计中最重要的元素。由于用户很难在没有导航的情况下去浏览一个网站里的内容，因此一个设置合理的导航栏能令访客浏览到更多感兴趣的内容。
这篇文章将展示关于网页导航栏设计最近的一些趋势和一些新潮的导航栏效果。

1.描述型导航栏

导航栏最重要的任务是明确指向网站各个部分的内容，但这些内容很难通过一两个关键字来表述清楚，因此采用描述行导航栏可以让访客在点击之前就了解到自己将能看到一些什么内容。
由于这种导航跟访客的感觉是：有一个向导在做现场解说，因此相对于只有关键字的“无声导航”，有人将描述型导航成为“有声导航”。

一年一度的圣诞节快到了。最近忙于学习，没时间写博文。今天特从国外转载几个漂亮的圣诞节倒计时给大家，顺便预祝大家圣诞节快乐。
这些资源来自：http://www.tripwiremagazine.com/2009/12/top-10-beautiful-christmas-countdown-timers.html，而且大部分都提供下载，大家可以放到博客上，增添圣诞气氛。另外我自己也对这些倒计时排了个序。

Top 1 ： Countdown to Christmas

首先解释一下，Pagespeed是Google宣布将把网站速度纳入PR评估标准后发布的一个基于Firefox Firebug插件的一个网站优化工具，可以自动分析页面内容，并提供非常详细的优化建议。目前属于Webmaster tools里的一个试验性工具，大家可以在Webmaster tools的lab菜单里查看自己网站的速度评估。使用截图如下。

点击Analyze Performance就可以分析当前的页面了。

自从换了域名，换了主题以后，我一直努力令博客的浏览体验更加好，但因此也挂载了大量的JS文件，页面的载入速度一度变得非常缓慢。于是优化就迫在眉睫了。我的优化步骤是：

1.压缩CSS和JS文件，并修改一部分插件，优化页面的载入进程

一般需要另外加载JS或者CSS的插件都会存在add_action(“wp_head”,”xxxx”)或者add_action(“wp_footer”,”xxxx”)这两句代码，目的是把自己的脚本或者样式插入到主题的wp_head()和wp_footer()处，使插件可以正常工作（那些反映说插件激活了但看不到效果的人注意了，我观察到相当一部分人所使用的主题不能正常加载插件的脚本，缺的就是这两个函数了）。
下面转回正题。我们需要优化载入进程，也就是流量整形，把CSS文件移到head里（这点100%的插件都能做到，不用担心），把JS文件放在页面最后。我们可以把add_action(xxxx)这句删掉，然后手工把所需的文件插入到主题模板里。