越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 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

No comments:

Post a Comment

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。