教程 | Navigator Style 1 (BT/BS)

超超超超久违的教程 :) 带着新设计低调的回归。整个 2013 就过去了三分之一了说、即使压力再多也好，心情再烂也好，日子还不是一样得过。这个世界不会因为你一个人的心情不好、压力很大而停止运转，所以，倒不如重拾欢笑，开开心心地过每一天。♥

言归正传，这次更新的教程：Navigator Style. 就是我们常说的页面效果啦。这次分享的教程呢，效果是自创的。其实这个教程是有瑕疵的，就是只适合用在单色背景。或者熟悉代码的大家，可以把效果的 basecode 拿去慢慢研究的哟，不过记得 CR 我就是了 :>

Blog Template User
1. 页面 - 添加小工具 - HTML/JavaScript
2. 把以下的代码添加进去

Blogskin User
1. 模板 - edit HTML
2. Ctrl + F 寻找代码 </style>
3. 在 </style> 的下面添加以下代码

<style>
#navi1 {
width: 100px;
height: 10px;
color: #fff;
margin-left: -111px;
-webkit-transition-duration: .7s;
padding: 10px;
padding-right: 25px;
background: 背景色/url;
border: 1px dashed #888;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}
#navi1:hover {
width: 100px;
height: 10px;
padding: 10px;
padding-right: 25px;
color: #fff;
margin-left: 0px;
-webkit-transition-duration: .7s;
background: 背景色/url;
border: 1px dashed #fff;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}
#nav1 {
font-family: arial;
text-transform: uppercase;
height:12px;
background: url(背景url);
color: #fff;
-webkit-transition-duration: .7s;
border: 1px dashed #888;
}
#nav1:hover{
font-family: arial;
text-transform: uppercase;
height:43px;
background: url(背景url);
color: #888;
-webkit-transition-duration: .7s;
border: 1px dashed #888;
}
</style>
<div style="top:60%; left:1px; position:fixed;">
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
<br /><br />
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
<br /><br />
<div id="navi1">
<div id="nav1"><center><span style="text-shadow:1px 1px 1px #ccc;"><a href="页面链接">页面名称</a></span><br /><br />页面简介</center>
</div></div>
</div>

小解释
红色代码：背景的颜色代码 or 网址
蓝色代码：页面位置 *可自行更改
紫色代码：页面链接
橙色代码：页面名称 *示例图 - HOME
靛色代码：页面简介 *示例图 - BACK TO HOME

# 号外号外：其实我没有 color 起来的代码也可以自己更换，毕竟 basecode 给了你们，要更改起来就比较容易。

PS : 求对新设计的留言啊啊啊啊 :D