国内采用 HTML5 编写网页的还比较少，但在国外 HTML5 已非常流行，与 HTML5 配套的一些代码工具及HMTL框架也很多，其中一款就是 HTML5 Reset， HTML5 Reset 已提前将常用 HTML5 标签及 CSS3 样式写好，我们只需要在这个框架上进行编写代码即可。

HTML5 Reset 官方网站：http://html5reset.org

官方下载链接

• HTML5 HTML+CSS代码官方下载：https://github.com/murtaugh/HTML5-Reset
• HTML5 WordPress 主题官方下载链接：https://github.com/murtaugh/HTML5-Reset-Wordpress-Theme

本地下载链接：

• HTML5 HTML+CSS代码下载
• HTML5 WordPress 主题下载

您可能也喜欢：
Html5 模板	任鸟飞首款免费WordPress主题 — HTML和CSS源文件	使用HTML5和CSS3制作的网站模板下载	新 WordPress 主题（HTML5+CSS3）	利用Html5和CSS3制作网站模板
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	15个免费的HTML5和CSS模板 (@shejidaren)	一个页面的HTML5网站模板+PSD (@shejidaren)	html页面转WordPress页面插件 (@99psn)	HTML5规范进行最后聆讯 即将正式公布 (@cninin)
无觅

WordPress 升级到 3.3 版本了，感觉 WordPress 越来越注重WEB UI界面设计，新版本看起来很舒服。新增了一个 添加媒体 这个按钮，之前上传的文件附件都是按图片和视频分类管理的，新版本直接合二为一，更加吸引我的是 文件拖拽上传功能，而且可以一次拖拽好几个，这功能非常实用啊，以后传图片之类的就不用一个一个上传了。

您可能也喜欢：
WordPress 的 JavaScript 本地化	如何自定义WordPress登录页面Logo	如何在WordPress中随机显示文章	使用国外虚拟主机的博主，请记得修改 WordPress 时区	WordPress 主题常用函数
来自无觅网络的相关文章：
wordpress 常用函数参考手册 (@kwu)	70+wordpress网站设计欣赏 (@shejidaren)	wordpress不可不知的函数集锦 (@kwu)	升级到WordPress3.3 (@citydog)	[WordPress主题]Proyecto-适合商业及图片类 (@citydog)
无觅

昨天抽时间在 style.css 中增加了 CSS3 Media Queries代码，并且修正了此主题在IE6中的bug（HTML5）问题，目前此主题在IE6中浏览效果良好。

当页面宽度小于640px时，页面样式如下：

默认页面宽度是980px，当页面宽度小于640px时，页面布局会自动切换到 手机浏览模式（宽度320px），能够很好的适应手机屏幕。

CSS3 Media Queries 代码编写示例：

/* media queries mobile */
@media screen and (max-width: 640px) {
/* 在这里重新定义 手机页面的布局样式 */
}

为让IE浏览器支持HTML5和CSS3，需增加下面的代码

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

您可能也喜欢：
任鸟飞首款免费WordPress主题 — HTML和CSS源文件	超强 CSS3 代码生成器	8款 CSS3 代码生成器工具	利用CSS3（box shadow）制作边框投影	CSS3 内阴影（inset）代码
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	[WordPress主题]Proyecto-适合商业及图片类 (@citydog)	10个详细的CSS3表单制作教程 (@shejidaren)	实用CSS3属性之 :target伪类实现Tab切换效果 (@shejidaren)	21个值得一看的CSS3教程 (@shejidaren)
无觅

我发现我这人喜新厌旧太厉害了，每款主题用不了2个月必修的更换或调整一下，昨天心血来潮，重新做了一款新主题，使用 HTML5 和 CSS3 编写，只好对不起那些使用IE8版本以下的用户了。

目前利用手机上网的用户越来越多，由于分辨率不同，会影响网页的布局，而利用HTML5和CSS3，则可以编写 自动适应屏幕大小的网页。

查看本主题的HTML源代码可以发现下面的代码：

<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″>

而查看本主题对应的CSS代码则会发现下面的代码：

/* media queries ipad */
 @media (min-width: 481px) and (max-width: 768px) {}

/* media queries mobile */
@media (max-width: 480px){}

当屏幕宽度小于480px时，网页布局会自动调用480px对应的CSS代码，这就是特意为手机设置的CSS代码。

HTML5和CSS3相当强大啊，还得慢慢研究一下。

您可能也喜欢：
利用Html5和CSS3制作网站模板	任鸟飞首款免费WordPress主题 — HTML和CSS源文件	使用HTML5和CSS3制作的网站模板下载	HTML5 Reset HTML+CSS 模板及 WordPress 主题下载	WordPress 主题 增加 CSS3 Media Queries 代码
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	HTML5和CSS3进阶教程 (@shejidaren)	20多个新HTML5网站设计欣赏 (@shejidaren)	[WordPress主题]Proyecto-适合商业及图片类 (@citydog)	html页面转WordPress页面插件 (@99psn)
无觅

今天心血来潮，又将博客主题修改了一下，每隔几个月，总有那么几天不自在，非要有点改变不行，主题就这样被我改的面目全非。改完之后，心情舒服多了……

看到很多人的博客主题，用了好几年都不变样，我都很佩服这类人啊，感情太专一了。自己做的主题，刚开始的时候感觉很满意，过不了几天就审美疲劳了，每次主题修改都这样，以后估计就这样无休止的改来该去吧。

您可能也喜欢：
任鸟飞首款免费WordPress主题 — 开发概述	任鸟飞首款免费WordPress主题 — 预览调试	任鸟飞首款免费WordPress主题 — 使用说明	任鸟飞首款免费WordPress主题 — 草绘	任鸟飞首款免费WordPress主题 — 正式发布
来自无觅网络的相关文章：
[WordPress主题]Proyecto-适合商业及图片类 (@citydog)	WordPress 透明主题：Translucence (@citydog)	wp大气蓝色主题Thunder1.1 (@99psn)	[WordPress主题]Mahasoli Tribune-图片博客首选 (@citydog)	WordPress主题BrandNew 10合1 博客/组合 (@99psn)
无觅

每一款主题看时间长了都不顺眼，趁周末把主题样式又重新调整了一下，我是不是太喜新厌旧了，主题用两三个月必须得调整或更换一下。

本次Wordpress主题调整涉及到的地方：

一. Logo设计

之前的黑色的Logo实在是太难看了，这次我给它加了一点特效，主要包括 投影 描边，立刻又立体感了，现在看起来舒服多了。

二. 左边栏样式更改

之前是灰色背景加边框，看来很复杂。这次只是利用几条线条了划分区域，简洁明了。

三. 删掉了 顶部的 博客描述

之前的顶部区域太大了，有点喧宾夺主的感觉，这次将 顶部的 博客描述 直接删掉了。

四. 详细页面 广告位 调整到 内容的前面

从2008年12月开始挂百度联盟广，截至2011年7月份，才收到110.48元，详情请见 百度联盟上月分成，实在是太少了，或许广告位放到内容前面，收益会多一点吧。

五. 导航栏大小调整

将导航栏字体及边框的大小调小了，这样整体比较协调，看来舒服一点。

六. 删除了左边栏的标签列表

关于标签的用处，我也说不好，不过为了整个页面的简介，这次就把标签列表给删掉了。

七. 删除了缩略图功能

内容为王，所以删掉了缩略图。

八. 杂七杂八的微调

在细节方面调整了很多内容，就不细说了。

如果你在使用过程中发现有什么问题，欢迎反馈给我们。

您可能也喜欢：
WordPress固定链接模块——Permalink Template Tags	WordPress安全密钥简介及使用方法	任鸟飞首款免费WordPress主题 — 使用说明	更新博客主题	任鸟飞首款免费WordPress主题 — 正式发布
来自无觅网络的相关文章：
[WordPress主题]Proyecto-适合商业及图片类 (@citydog)	WordPress 主题：Side Blog (@citydog)	WordPress主题BrandNew 10合1 博客/组合 (@99psn)	FoodPress食谱博客WordPress主题 (@99psn)	YT Cloud 超酷商业WordPress主题 (@99psn)
无觅

随着智能手的的快速发展， QR 码（二维码）在手机上的应用也越来越多，利用手机拍照功能，加上智能手机的二维码识别软件，可以方便读取二维码内容，而不用在去死记硬背一些枯燥乏味的东西（比如网址等）。

现在很多网站上都提供了二维码，特别是一些手机下载类网站，以便手机用户快速读取二维码内容（一般都是下载链接），直接转到下载页面。

一、什么是 QR 码（二维码）

具体可参考维基百科关于QR 码（二维码）的介绍。

二、如何利用Google 图表 API 生成 QR 码

实例：http://chart.apis.google.com/chart?cht=qr&chs=150×150&chld=L|4&chl=http://www.renniaofei.com

参数解释
http://chart.apis.google.com/chart? ： 调用 Google 图表 API
cht=qr ：选择生产QR码
&chs=100×100 ：尺寸大小
&chld=L|4  ：L代表默认纠错水平； 4代表二维码边界空白大小，可自行调节。
&chl= ：二维码内容

三、如何给 WordPress 每篇文章生成 QR 码（二维码）

<img src=”http://chart.apis.google.com/chart?cht=qr&chs=150×150&chld=L|4&chl=<?php the_permalink(); ?>” width=”150″ height=”150″ alt=”QR 码” />

正如 电影《手机》中，费墨所说：“在一张床上睡了20年，的确有点审美疲劳”。博客的主题也是，用的时间长了，就产生厌倦心理，为了保持网友的新鲜感，博客主题更换频率控制在一年以内比较好。花了2天时间，我重新设计了 任鸟飞网页设计博客 的主题，新款主题更注重简洁高效。

任鸟飞网页设计博客之前的主题样式

主题设计过程中着重考虑的问题点

1. 删除大量广告位
刚写博客的时候，带有很大的功利性，主要是以赚钱为目的，所以加了很多广告位，但理想和现实总是遥远的，至今百度联盟还没到最低支付额（100元）。

如果你的博客刚建立没多久，访问人数还在2位数转悠，就别老想着赚钱了，最终可能得不偿失。当然大部分人还是希望依靠博客赚钱的，我建议广告位数量最多不要超过2个，在不影响网站用户体验的同时，也能满足一下自己小小的虚荣心。

2. 化繁为简，突出博客内容
读者关注的是博客的内容，所以博客主题应尽量凸显内容，应删去那些杂七杂八，花里胡哨，无关紧要的东西。

3.  细节设计
之前的主题太紧凑，看时间长了容易造成眼睛疲劳，新版主题增加了大量的空白设计。

评论部分采用了 twentyten 主题的样式，并将发表评论表单样式稍作修改，整个表单中的内容比例更协调，看起来更舒服一点。

每篇文章标题处增加 发表时间，让读者清楚文章发表的日期，以便读者快速判读内容的时效性。

使用主题默认的 页码导航形式。博客的最大特点就是动态性，读者很少去看以前的文章，博主必须经常更新博客内容，而大多数读者能翻2到3页就不错了，所以使用默认的页码导航即可满足要求。

新主题问题点

主题制作的比较匆忙，肯定有很多问题，希望大伙多提提建议。

WordPress 升级到 3.1 之后, 如果主题支持 wp_head() 方法, 将在页面加载一个名为 l10n.js 的文件, 这是为 JavaScript 本地化提供的工具库。 更多内容请参考  原文链接。

平时一般不用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文件，更直观一点。