言归正传，这次更新的教程：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
Categories: Bii の語法筆記, BS 教程, Navigator, 自創教程
Hey, how are you? Well, peeps! I'm here to update my blog again (╯3╰) Hmm, about two weeks I didn't touch my blog. Okie, quite miss my blog now. Unfortunately, I really busy. Everyday I'm busy for my tuition, homework that given by teacher and all those bla bla bla.
Hmm, waiting to die. So, I decided that I'm not going to online from today onwards. *PS: Hope that I can do what I said.
Announcement - Tutorial blog will update soon. Novel blog is under-construction. Any tutorial that requested I'll update for you all as rewards.
As I will leave my blog temporarily no longer soon. But my insta and twitter will update daily. Here's the way to contact me :
Instagram : @bii_babey
一個月又21天，我告別了寫日記發教程的部落格。
