几步让你的导航栏更俏皮
一直想把自己的页面个性化一下 终于在昨天晚上折腾了半个多小时把我的主页自定义了一下
首先. 我把导航栏全部由文字换成了可爱的图片 如下图：
但是我觉得还缺少些什么 便灵机一动加了些css3代码 其中是有关animate（css3变换）的一些效果 以下是我自定义之后 光标浮动在“Home（首页）”上面的旋转效果 如下图：
说了这么多 大家一定很想自己动手自定义自己的页面了吧
下面我亲自详细罗列出自定义步骤：
一 . Html编辑
1.登陆后在自己主页右上角找到 自定义模板 并点击进入后 下拉菜单 找到 编辑模板代码
2.进去后会发现一串串代码，这时就要细心了 仔细查看代码 找到<body id=..."之下的几行，有一个<nav>标签，其中<nav><ul>......</ul></nav>之间的代码 便是你页面导航栏的内容 也是你要修改的地方
3.找到<li><a href="{$global.url}"></a>......这个地方，在<a></a>之间添加代码：<img href="" />
4.准备好你要取代导航文字的图片icon，可以自己google一下，（可搜索网页nav、 icon、nav 图标、等关键字） 将光标放在<img>标签中的双引号之间 并点击编辑框上方的上传图片 上传你的导航图标 并保存一下 立即可以看到你页面导航栏的变化
具体操作可参照以编辑好的下图代码：
以此类推，可将你的 私信 RSS 存档 投稿 全部替换掉...
二 . CSS编辑
下面就开始进行效果自定义了
1.以上操作完成后点击“保存" 并返回”自定义设定“ 下拉菜单 找到 添加自定义CSS编辑框 添加你的自定义css代码依旧参照以上html代码 找到<ul class=”clearfix"><li><a href="... 这一行，因为ul类为：clearfix 于是可以这样编写语句：.clearfix nav a img{} 而{}里面的就是指定定义导航栏的css属性
2.想要给导航图标添加动画，可在.clearfix nav a img{} 双括号里面添加以下语句：
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
3.再添加触发条件代码，语句如下：
.clearfix nav a:hover img{-webkit-transform:rotate(36deg) ;
-o-transform:rotate(36deg);
-moz-transform: rotate(36deg) ;
transform:rotate(36deg);}
具体代码可参照下图：
以上图片中代码全部为我个人 的自定义页面代码，只是简单的加了些浮动旋转CSS3动画，
还有很多自定义属性，比如：位移、旋转并缩放、大家可以自己研究添加！
当然你可以按照自己的喜好改动其中的属性，具体可以参照CSS3 Animate标准进行改动
也可以参照相关教程学习并实践，Have Fun ^_^!!!
浏览器支持：
Firefox, Safari/Chrome和Oprea 10.5支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-
本文相关内容页可以参照以下网站：
你需要知道的css3动画技术
推荐css学习网站：
W3school.com.cn
--白日梦蓝
