Reminisce .

教学 ♥ 漂浮的页面

27 July 2012 @ 9:36 PM

给 SORA 的教程

转帖请留言和附上链接 ♥

步骤一

Blogger Template : Design - Edit html

用 ctrl + f 找 :

]]></b:skin>

Blogskin : Template - Edit html

用 ctrl + f 找 :

</style>

步骤二

在下面放入 :

.navigate{
top:20px;
left:45px;
position:fixed;
font-family:Impact;
font-size:20px;}

红色的是页面和部落格最上方的距离 .

号码越大 , 距离越大 .

橙色的是页面和部落格左边的距离 .

号码越大 , 距离越大 .

黄色的可以自行调整 .

fixed : 固定在目前的位置 .

absolute : 跟着 scrollbar 移动 .

蓝色的是页面的字体 .

如果使用图片做为页面的话 ,
就可以不用更改 .

紫色的是页面的字体大小 .

如果使用图片做为页面的话 ,
就可以不用更改 .

备注 :

你也可以在 .navigate { 下面加入其他美化代码 .

如果要字体有影子效果请参考这篇教程 .

步骤三

Blogger Template : Design - Edit layout -
Add a gadget - JavaScript / Html

Blogskin : 把代码放在 </body> 上面 .

代码 ( 使用文字的页面 ) :

<div class="navigate">
<br>
<br><a href="页面 1 的链接">页面 1 的名称</a>
<br>
<br><a href="页面 2 的链接">页面 2 的名称</a>
<br>
<br><a href="页面 3 的链接">页面 3 的名称</a>
<br>
<br><a href="页面 4 的链接">页面 4 的名称</a>
</div>

代码 ( 使用图片的页面 ) :

<div class="navigate">
<br>
<br><a href="页面 1 的链接"><img src="页面 1 的图片网址"/></a>
<br>
<br><a href="页面 2 的链接"><img src="页面 2 的图片网址"/></a>
<br>
<br><a href="页面 3 的链接"><img src="页面 3 的图片网址"/></a>
<br>
<br><a href="页面 4 的链接"><img src="页面 4 的图片网址"/></a>
</div>

如果要更多页面就添加 :

* 图片页面的代码 :

<br><a href="页面的链接"><img src="页面的图片网址"/></a>
<br>

* 文字页面的代码 :

<br><a href="页面的链接">页面的名称</a>
<br>

步骤四

保存 Save .

任何疑问请在 tagboard 留言 .

在评论箱留言请告诉我 (: