189 8069 5689
利用CSS3动画属性“@keyframes ”可实现一些动态特效，具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性，实现页面淡入特效，在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。 淡入代码：
创新互联-专业网站定制、快速模板网站建设、高性价比方正网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式方正网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖方正地区。费用合理售后完善，十多年实体公司更值得信赖。
@keyframes fade-in {
0% {opacity: 0;}/*初始状态 透明度为0*/
40% {opacity: 0;}/*过渡状态 透明度为0*/
100% {opacity: 1;}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
0% {opacity: 0;}
40% {opacity: 0;}
100% {opacity: 1;}
}
#wrapper {
animation: fade-in;/*动画名称*/
animation-duration: 1.5s;/*动画持续时间*/
-webkit-animation:fade-in 1.5s;/*针对webkit内核*/
}
直接将上述代码添加到主题style样式文件中，并修改其中 #wrapper 为你的主题ID或类的名称即可。
另外，可针对页面某部分延长显示时间，比如侧边栏，再加上一句：
#sidebar {
animation: fade-in;
animation-duration: 4s;
-webkit-animation:fade-in 1.5s;
}
同理，可对页面不同的部分设定不同的淡入显示时间，实现分段显示。
1、层级较深的网站，面包屑导航适合层级较深的网站，如果只有一级分类的话，通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航的作用。
2、独立不交叉的网站机构，由于面包屑网站导航路径是线性结构的，因此网站内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现在不同的路径中，让用户感到困惑。
在wordpress中添加面包屑导航的话，可以直接使用插件来实现，不过很多站长都不喜欢用插件，还是认为如果能用代码解决的话是最理想的。我最近也找了一些关于面包屑导航的资料。下文中就有详细解决怎么用代码来实现wordpress面包屑导航：
一、在wordpress博客当前主题的functions.php文件（没有就创建一个）中添加以下代码：
//面包屑导航
functionget_breadcrumbs()
{
global$wp_query;
if(!is_home()){
//StarttheUL
echo'ulclass="breadcrumbs"';
//AddtheHomelink
echo'liahref="'.get_settings('home').'"'.get_bloginfo('name').'/a/li';
if(is_category())
{
$catTitle=single_cat_title("",false);
$cat=get_cat_ID($catTitle);
echo"li?".get_category_parents($cat,TRUE,"?")."/li";
}
elseif(is_archive()!is_category())
{
echo"li?Archives/li";
}
elseif(is_search()){
echo"li?SearchResults/li";
}
elseif(is_404())
{
echo"li?404NotFound/li";
}
elseif(is_single())
{
$category=get_the_category();
$category_id=get_cat_ID($category[0]-cat_name);
echo'li?'.get_category_parents($category_id,TRUE,"?");
echothe_title('','',FALSE)."/li";
}
elseif(is_page())
{
$post=$wp_query-get_queried_object();
if($post-post_parent==0){
echo"li?".the_title('','',FALSE)."/li";
}else{
$title=the_title('','',FALSE);
$ancestors=array_reverse(get_post_ancestors($post-ID));
array_push($ancestors,$post-ID);
foreach($ancestorsas$ancestor){
if($ancestor!=end($ancestors)){
echo'li?ahref="'.get_permalink($ancestor).'"'.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'/a/li';
}else{
echo'li?'.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'/li';
}
}
}
}
//EndtheUL
echo"/ul";
}
}
二、在显示面包屑导航的位置添加以下调用代码：
?php
if(function_exists('get_breadcrumbs')){
get_breadcrumbs();
}
?
三、在主题的css样式文件中添加以下样式代码：
ul.breadcrumbs{list-style:none;font-size:12px;}
ul.breadcrumbsli{float:left;margin-right:5px;}
Edge Animate是Adobe最新出品的制作HTML5动画的可视化工具，简单的可以理解为HTML5版本的Flash Pro。在之后的文章中，我会逐一的介绍这款新的HTML5动画神器。这篇文章先说一说如何把Edge Animate制作的HTML5动画作品嵌入到Wordpress中。
因为主题缺少评论模板，你可以这样：在single.php之类的文章详情页（一般主题仅有single.php和page.php是文章详情页），的之后某个地方（要考虑CSS布局）直接添加来调用Wordpress默认的评论样式，这个评论样式不好看，没关系你可以：1.修改默认评论样式的CSS；2.在WP后台插件安装页面搜索有言之类的评论插件，装上后，效果就好多了！