HTML5/CSS3工具网站终极列表

1.HTML5 & CSS3 Readiness

2.HTML5 Security Cheatsheet

3.Button Maker

4.When can I use…

5.CSS3 Color Names

6.CSS3 Generator

7.Modernizr

8.The HTML5 test

9.CSS Border Radius

10.FindMeByIP

11.CSS3 Gradient Generator

12.CSS3 Watch(css3watch.com/)

13.tools & resources for web professionals

14.font dragr

15.CSS3 Generator(www.widgetpad.com/694/)

16.CSSDesk

17.HTML5 Revision Tracker

18.font-face Generator

19.CSS3 Selectors Test

20.IE Print Protector

21.Web Browser CSS Support

WordPress ajax 分页效果代码

一、思路:
1. 一个客户端页面,这里包含了有css标记的元素,比如a,可以供js来寻找,在用户点击的时候发出ajax请求
2. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js
3. 定义的js文件,规定请求的动作,和接受数据之后的动作
4. 后台模板中的functions.php定义一个函数,用了规定接受到ajax请求之后后台要做的动作。
二、步骤:
1. 对于wordpress,首页的客户端页面就是index.php
2. jquery.js在header.php中包含


3.把自己定义的js保存为index_ajax_navi.js,同样在header.php中包含


index_ajax_navi.js里的内容为:

var navi='.page_navi';
var navi_a='.page_navi a';
var content='section';
 
$(document).ready(function index_ajax_navi (){
	$(navi_a).click(function() {
		var z = $(this).attr("href");
		$.ajax({
			url: z,
			type:"POST",
			data:"action=index_ajax_navi",
			beforeSend:function()
			{
				document.body.style.cursor = 'wait';
				var C=0.7;
				$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});				
				$(navi).html('载入中...');
			},
			error: function(request) 
			{
				alert(request.responseText);
			},			
			success: function (data)
			{
				$(content).html(data);					
				document.body.style.cursor = 'auto';
				var C=1; 
				$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
				//$body.animate({ scrollTop: '0px'}, 1000);
				index_ajax_navi();//翻页后DOM变化了,需要重新绑定函数
				//$body.animate( { scrollTop: $(content).offset().top - 150}, 1000);
				//$body.animate({ scrollTop: '0px'}, 1000);
				jQuery('html, body').animate({scrollTop:$(content).offset().top - 100}, 'slow');
			}
		});
		return false;
		});
})

4 index部分
把index.php写成两个文件,一个是框架文件,一个是index_list.php。是ajax请求需要重新加载的页面。这里要注意,并不是要写成这个样子,这是一种思想。就是index_list.php是需要被重新加载的,每个人把自己的index.php需要在点击页面之后重新加载的东西提出来,写到index_list.php之中即可。
index写成:


index_list.php写成这个样子:

		
			
				
				
					
				
					
					
													if(function_exists('wp_page_numbers')) {
								wp_page_numbers();
							}
							elseif(function_exists('wp_pagenavi')) {
								wp_pagenavi();
							} else {
							global $wp_query;
							$total_pages = $wp_query->max_num_pages;
							if ( $total_pages > 1 ) {
								echo '';
									par_pagenavi(4);
								echo '';
								}
							}
						?>
					
			
				
					
						

5 后台php部分
下面的代码放到functiongs.php中,

function index_ajax_navi(){
	if( isset($_POST['action'])&& $_POST['action'] == 'index_ajax_navi'){
	include_once TEMPLATEPATH.'/index_list.php';  //注意修改为你自己的文件的位置
		die();
	}else{
		return;
	}
}
add_action('template_redirect', 'index_ajax_navi');

6 寄语
希望大家通过上面的例子能够成功实现首页的ajax翻页效果。每个人的主题设置不同,需要根据自己的主题设置自己的参数。特别是包含分页链接的div的class。我这里是.page_navi。还有就是包含index_list.php的 section,需要在js中填入这两个关键的位置。
转自:http://dhblog.org/46.html

最简单的jQuery Ajax 无限分页 WordPress 版

一.加载 jQuery 库
既然是 jQuery 驱动的 Ajax ,加载 jQuery 库是必须的。

二.文章列表格式
在你的文章列表页面(首页 index.php、归档 archive.php )需要确保有以下类似的结构


注意上面的文章div和分页导航的div不在同一个里面。
四.Ajax 获取下一页
在你的主题 js 文件里加入以下代码

// 使用 live() 使 js 对通过 Ajax 获得的新内容仍有效
    $("#pagination a").live("click", function(){
        $(this).addClass("loading").text("LOADING...");
        $.ajax({
    type: "POST",
            url: $(this).attr("href") + "#content",
            success: function(data){
                result = $(data).find("#content .post");
                nextHref = $(data).find("#pagination a").attr("href");
                // 渐显新内容
                $("#content").append(result.fadeIn(300));
                $("#pagination a").removeClass("loading").text("LOAD MORE");
                if ( nextHref != undefined ) {
                    $("#pagination a").attr("href", nextHref);
                } else {
                // 若没有链接,即为最后一页,则移除导航
                    $("#pagination").remove();
                }
            }
        });
        return false;
    });

五.滚动触发翻页(与上面那段是一样的效果,此效果是自动翻页,俩者可以选一)
如果想当鼠标滚动到接近页面底部时自动翻页,则可以把代码改成下面的样式

// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
// 判断窗口的滚动条是否接近页面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
    $(this).addClass('loading').text('LOADING...');
    $.ajax({
        type: "POST",
        url: $(this).attr("href") + "#content",
        success: function(data){
            result = $(data).find("#content .post");
            nextHref = $(data).find("#pagination a").attr("href");
            // 渐显新内容
            $("#content").append(result.fadeIn(300));
            $("#pagination a").removeClass("loading").text("LOAD MORE");
            if ( nextHref != undefined ) {
                $("#pagination a").attr("href", nextHref);
            } else {
            // 若没有链接,即为最后一页,则移除导航
                $("#pagination").remove();
            }
        }
    });
}
});

六.添加导航 css
为导航添加一段 css 美化一下,另外还可以准备一张 gif 图来表示正在加载,下面是 Melody 的样式:

#pagination {padding: 20px 0 0 30px; }
#pagination .nextpostslink {width: 600px; color: #333; text-decoration: none; display: block; padding: 9px 0; text-align: center; font-size: 14px; }
#pagination .nextpostslink:hover {background-color: #cccccc; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#pagination .loading {background: url("images/loading.gif") 240px 9px no-repeat; color: #555; }

转自http://kayosite.com/jquery-ajax-turn-page-for-wordpress.html

使用 HTML5 改造 WordPress 主题

关注互联网的你会很容易发现, 在 2012 年, HTML5 正以前所未有的速度发展起来, HTML5 不但强化了 Web 的表现,还加入了像本地数据库( Web Database SQL )以及强大的音频、视频支持这一类的 Web 应用功能。这样强大的 HTML5 无疑会为 Web 带来颠覆性的变化。当然,并非所有的平台和浏览器都支持 HTML5 ,即使浏览器支持 HTML5 的部分规则,也不一定支持所有的规则,因此 HTML5 的普及仍需时,但其中一些功能已经在各种浏览器间有着良好的支持,这次 Kayo 要介绍的就是 HTML5 的语义化标签和微数据,语义化标签在主流的现代浏览器( Chrome 、 Firefox 等)以及 IE9 以上版本的 IE 中已经被支持了,对于低版本的 IE 开发者也可以使用 html5shiv 提供的 html5.js 来让 HTML5 标签获得支持,微数据作为一种华丽丽的 SEO 也逐渐被更多搜索引擎支持了。下面主要给大家叙述一下如何使用 HTML5 改造你的 WordPress 主题。

一.使用 HTML5 的 声明
在 HTML 4.01 和 XHTML 中那段长长的 DTD 类型声明应该是所有标签中最难记住的标签了,但在 HTML5 中, DTD 声明非常简单:


就是这么简洁,要使用 HTML5 ,第一步肯定是先使用 HTML5 的 二.加入 html5.js
我们可以在主题的 head 元素内加入一段 js 来让 IE8 及以下的 IE 完全支持 HTML5 的标签。
下载由 html5shiv 提供的这个html5.js文件。


代码中使用了条件注释针对低版本的 IE(IE8 及以下版本)浏览器来调用这个 js 文件,其他浏览器会忽略掉这段代码,不会造成浪费的 HTTP 请求。

三.CSS Reset
CSS Reset 是为了把浏览器提供的默认样式去掉的一段 CSS ,详细的介绍可以参见 Kayo 之前所写的一篇文章 《关于 CSS Reset 》,本文中的 CSS Reset 是根据前文的 CSS Reset 改造的,主要是加入了对 HTML5 中新加入的标签的重置。下面是 Kayo 针对 HTML5 的 CSS Reset ,供大家参考,也可以参照前文定制更适合个人情况的 CSS Reset 。

/*** 加入 HTML5 新标签的样式重置  ***/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body{line-height: 1; text-align: left; }
:focus {outline: 0; }
/*** 将一些可以代替 div 标签的 HTML5 标签定义为块状元素 ***/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none; }
ins {text-decoration: none; }
mark {background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del {text-decoration: line-through; }
table {border-collapse: collapse; border-spacing: 0; }
input, select {vertical-align: middle; }

现在,你可以放心的在 WordPress 主题中使用 HTML5 标签了。

四.修改主题中的标签为语义化的 HTML5 标签
在网页重构中,我们舍弃了没有任何语义的 table 布局,取而代之的是新的标记,最常见的莫过于 div 这个标签,不过在设计复杂的页面时,新的问题出来了—— div 的滥用导致页面变得臃肿并且难于理解。值得兴奋的是, HTML5 为开发者引入了新的语义化标记,下面给大家介绍一些适合在 WordPress 主题中使用的 HTML5 标签。

用于定义文档的页眉,可以代替原本包裹页眉的  。
 用于定义文档的页脚,可以代替原本包裹页脚的  。
 用于定义导航链接的部分,即代替包裹菜单的  。
 用于定义独立的内容,很适合代替包裹文章的 ,如 WordPress 首页、归档页或文章页的文章列表中可使用该标签包裹文章。
 该标签用于定义其所处内容之外的内容,并且 aside 的内容应该与附近的内容相关,因此很适合用来包裹 WordPress 的侧边栏。
 
另外 , ,  等 HTML5 标签也适合用来改造升级 WordPress 主题

这些标签的具体意义可以参见W3school

五.为主题加入 HTML5 微数据
关于 HTML5 微数据的介绍和使用方法可以参见 Kayo 之前所写的文章《HTML5 之微数据》,这里主要介绍一些适合 WordPress 使用的微数据规范,因此建议读者先阅读前文再阅读下文。

这里我们使用的是 schema.org 的微数据规范,加入微数据是为了让机械(如搜索引擎)识别网页内容的意义,可以说是华丽丽的 SEO 。

下面列举一些适合的微数据规范:

http://schema.org/WPHeader 这是定义网页版头的微数据,需要注意的是 WPHeader 的 “WP” 不是指 WordPress ,而是 Web Page 的缩写,不过用在 WordPress 上也是非常合适的。
http://schema.org/WPFooter 定义网页页脚。
http://schema.org/BlogPosting 定义一篇博客文章。
http://schema.org/Review 定义一条评论。

这些规范的详细用法以及更多的规范可以在 schema.org 搜索得到。
转自http://kayosite.com/improve-wordpress-theme-by-html5.html

HTML5 之微数据

随着 HTML5 规范的发展,一些 HTML5 的特性已经逐渐被现代浏览器支持,Kayo 最近也给网站加入一些 HTML5 的特性,比如这次要介绍的微数据。

一.什么是微数据?
首先通俗地介绍一下,微数据是在如 span、div 的标签内添加属性,让机器(如搜索引擎)识别其意义,一些特定类型的信息,例如评论、人物信息或事件都有相应的属性,用来描述其意义。

在这里再科普一下,给出谷歌关于微数据的解释:
HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论、人物信息或事件。每种信息都描述特定类型的项,例如人物、事件或评论。例如,事件可以包含 venue、starting time、name 和 category 属性。

微数据使用 HTML 标记(常为 span 或 div)中的简单属性为项和属性指定简要的描述性名称。

二.例子
下面给出一个简单的例子,把 HTML5 微数据应用在网站的评论部分:

首先写出一段简单的 HTML ,该段 HTML 显示了一条评论

Kayo2012年2月6日 22:30评论内容

以下是用微数据标记的同一段 HTML 内容

Kayo2012年2月6日 22:30评论内容

说明:itemscop 表示该 div 中描述了某一项微数据,itemtype=”http://data-vocabulary.org/Review” 表示该微数据项类型是一条评论;具体的数据项都用 itemprop 属性标识,如 “reviewer” 表示评论者, “dtreviewed” 表示评论时间,其中 datatime 属性标识了该评论的具体评论时间,属性值必须使用 ISO 日期格式描述一个日期,另外为了使用户易于理解,网页上可以用常见的时间格式标识时间。

三.微数据的语法
在一项微数据的最外层 div ,需要用 itemscop 标识,并用 itemtype 指定微数据类型, itemtype 的值是一个 url ,用于引入一个微数据词汇表(即各种微数据的类型定义),可以使用 http://schema.org 或是 http://data-vocabulary.org ,具体的微数据类型可以参考上面两套微数据词汇表。

在用 itemscop 标识了的元素内使用 itemscope 属性添加微数据,itemscope 的值为 HTML 标签包含的内容(如例子中的 reviewer 和 description ),又或是标签的属性值(如例子中的 dtreviewed,取 datatime 的值为属性值)。

还有以下元素,也是以属性值作为 itemscop 的值