漂浮在旁边的另类页面

啦啦啦~~趁着要开学了就来发发教程呗 =D

转载请务必贴上链接

先到模板 --> 修改 Html --> Ctrl + F 寻找 ]]></b:skin>

然后在 ]]></b:skin> 的上面添加以下的代码

.nav{
background: #fff;
text-align:center;
color: #000000;
width: 100px;
height: 90px;
opacity: 0;
margin-top:-100px;
-webkit-transition:all .3s ease-in-out;
 }

.nav:hover{
margin-top:-60px;
text-align:center;
-webkit-transition:all .3s;
height: 15px;
opacity:.6;
}

温馨小提示 ❤
❤ 橙色的字 --> 背景的颜色
❤ 红色的字 --> 字体的颜色
❤ 粉色的字 --> 背景的宽度
❤ 黄色的字 --> 背景的高度
❤ 青色的字 --> 数目越大，背景就越高，想看效果可以把数目加大到 200px，然后再调回来

PS :: 那个 .nav:hover{ 是鼠标指向图片后的效果

好了就保存起来

再去布局 --> 添加小工具 --> Html / Jave Script 把以下的代码放下去

注意：如果你是要用字体来显示页面的话就用代码 1，如果要用图片来显示页面的话就用代码 2

代码 1

<div style='position:fixed;top:140px;right:30px;'>
<img src="图片网址" height='90'width="100"/>

<div class="nav">

<a href="链接网址">

要显示的字体

</div></div>

<div style='position:fixed;top:240px;right:30px;'>

<img src="图片网址" height='90'width="100" />

<div class="nav">

<a href="链接网址">

要显示的字体

</div></div>

<div style='position:fixed;top:340px;right:30px;'>

<img src="图片网址" height='90'width="100" />

<div class="nav">

<a href="链接网址">

要显示的字体

</div></div>

<div style='position:fixed;top:440px;right:30px;'>

<img src="图片网址" height='90'width="100" />

<div class="nav">

<a href="链接网址">

要显示的字体

</div></div>

代码 2

<div style='position:fixed;top:140px;right:30px;'>
<img src="图片网址" height='90'width="100"/>
<div class="nav">
<a href="链接网址">
要显示的图片
</div></div>

<div style='position:fixed;top:240px;right:30px;'>
<img src="图片网址" height='90'width="100" />
<div class="nav">
<a href="链接网址">
要显示的图片
</div></div>

<div style='position:fixed;top:340px;right:30px;'>
<img src="图片网址" height='90'width="100" />
<div class="nav">
<a href="链接网址">
要显示的图片
</div></div>

<div style='position:fixed;top:440px;right:30px;'>
<img src="图片网址" height='90'width="100" />
<div class="nav">
<a href="链接网址">
要显示的图片
</div></div>

好了就保存起来，这个教程有点复杂嗯，如果有不明白的话就问我，成功与否都记得要告诉我，不然我不知道这个教程是不是有用的。