[教程]Navigation 頁面 Ⅱ ♥Sunday, December 30, 2012, 12/30/2012 08:37:00 PM - Permalink | 0 Comments
這次教的是圖片頁面，很少Blogskin有圖片頁面的說。也許有，但我暫時還沒看到。最近有人問我，Blogskin的頁面是否可以用圖片來取代？答案是可以的。
我先借用 Bii 的教程，然後再教各位如何用BT的方法取代BS。我先聲明哦~這個我研究蠻久的，如果你拿走代碼，一定要告訴我。如果是要轉載教程的，就不好意思咯~不能轉載 XD
好的，簡體字的開始就是我的教程開始了哦~如果你到现在都还不知道我在讲什么的话，我现在给各位看照片。
就是上面这个东东啦！如果你是BT，你可以到 这里 。如果你是BS的，看这里XD 我不知道外面还有没有这种教程，但是我还是发了XD 首先，使用BS的人，你们可以用很多方法，我一个一个和你们说怎样弄。
① 使用a 标签，链接。
i. 直排方式
<div style="top: 5px; right: 5px; position: fixed;"><a href="页面网址1"><img src="图片网址1"></a><br/><a href="页面网址2"><img src="图片网址2"></a><br/><a href="页面网址3"><img src="图片网址3"></a><br/><a href="页面网址4"><img src="图片网址4"></a><br/></div>
如果你要再有多一点距离的话，你可以自己加多几个<br/>
例子：
例子：
<div style="top: 5px; right: 5px; position: fixed;"><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><br/><br/></div>
ii. 横排方式
<div style="top: 5px; right: 5px; position: fixed;"><a href="页面网址1"><img src="图片网址1"></a></div><div style="top: 5px; right: 20px; position: fixed;"><a href="页面网址2"><img src="图片网址2"></a></div><div style="top: 5px; right: 35px; position: fixed;"><a href="页面网址3"><img src="图片网址3"></a></div><div style="top: 5px; right: 50px; position: fixed;"><a href="页面网址4"><img src="图片网址4"></a></div>
那么要把以上代码放在哪里呢？找</style>，然后把上面的代码paste在</style>后面。那么就可以预览一下，ok了就可以save起来了。
说明：
top，是顶部的意思，px的值越大，那个图片就会越下面。right，是右边的意思，px的值越大，那个图片就会越左边。如果你要放在最左边就直接把right改成left。position就是他的位置啦~你要固定的话就是fixed，不要固定的话就不要就改成absolute。
横排的right/left，px的值一定要不一样哦~~不然他们会黏在一起。
那么页面网址要怎么放呢？就是把你那个post的网址放下去就好了。图片网址你们可以自己网上找。
② 使用BS的页面代码。
你们还记得我说的页面代码吗？不记得的可以往下看，复习一下。
说明：
XX是你要引用的class，你也不需要用尽脑汁去修改它们，因为BS原本的代码已经有了，so没必要去修改。我跟你们讲，只是要你们明白他的用处 :)
那么main呢？mian就是你们4个页面的名称代码，有的人是post、entry等等。KK就是引用你4个页面代码，就是你点了它们之后，就会到另个页面。title就是你们鼠标指过去后，就会出现的字体。标题就是你页面显示的字体。
我知道我说得很复杂，不过如果你们细心的话，你们就会和我一样明白了==
好了，复习完后，就是教各位如何把它们改成图片的页面。会很复杂，希望各位会明白。首先找你的页面代码。加上img标签就可以了。
我的代码：
说明：
class，你可以空着，如果你要把网页放在角落的话，我待会再给各位额外的代码。把mian改成你们原本的。KK也是改回你们原本的。图片网址改成你们要的的图片网址。
好了，如果你们要把它们放在角落，有两个方法。第一就是把以下代码paste在</style>前面。当然，还是要保留刚刚那个页面的代码。
和a 标签、链接的方法差不多一样的。以上的方法是for直排。不过记得在你页面代码那里加<br/>。如果是直排的，你们就加多几个和popo一样的代码。
例子：
就是这样啦~~~一样，right/left的px值是不能一样的。然后呢，刚刚不是说有空着的 a class 吗？把popo这些名字放在不一样的页面代码里面的a class了。
第二，你们可以自己在img 标签里面放style。例子如下：
就是这样，第二个方法是给那些第一个方法不能成功的。如果你连全部的方法都失败的话，tell me :)
教程已經到尾聲了！如果有什麽不明白的，可以留言發問。我知道這一篇教程很亂/.\ 不好意思哦~~希望可以體諒一下，因為我已經儘量寫了。
说明：
top，是顶部的意思，px的值越大，那个图片就会越下面。right，是右边的意思，px的值越大，那个图片就会越左边。如果你要放在最左边就直接把right改成left。position就是他的位置啦~你要固定的话就是fixed，不要固定的话就不要就改成absolute。
横排的right/left，px的值一定要不一样哦~~不然他们会黏在一起。
那么页面网址要怎么放呢？就是把你那个post的网址放下去就好了。图片网址你们可以自己网上找。
② 使用BS的页面代码。
你们还记得我说的页面代码吗？不记得的可以往下看，复习一下。
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML" title="">标题1</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML" title="">标题2</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML" title="">标题3</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML" title="">标题4</a>
说明：
XX是你要引用的class，你也不需要用尽脑汁去修改它们，因为BS原本的代码已经有了，so没必要去修改。我跟你们讲，只是要你们明白他的用处 :)
那么main呢？mian就是你们4个页面的名称代码，有的人是post、entry等等。KK就是引用你4个页面代码，就是你点了它们之后，就会到另个页面。title就是你们鼠标指过去后，就会出现的字体。标题就是你页面显示的字体。
我知道我说得很复杂，不过如果你们细心的话，你们就会和我一样明白了==
好了，复习完后，就是教各位如何把它们改成图片的页面。会很复杂，希望各位会明白。首先找你的页面代码。加上img标签就可以了。
我的代码：
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML"><img src="图片网址1"/></a>
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML"><img src="图片网址2"/></a>
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML"><img src="图片网址3"/></a>
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('KK').innerHTML"><img src="图片网址4"/></a>
说明：
class，你可以空着，如果你要把网页放在角落的话，我待会再给各位额外的代码。把mian改成你们原本的。KK也是改回你们原本的。图片网址改成你们要的的图片网址。
好了，如果你们要把它们放在角落，有两个方法。第一就是把以下代码paste在</style>前面。当然，还是要保留刚刚那个页面的代码。
.popo {
right:5px;
top:5px;
postion:fixed;
}
和a 标签、链接的方法差不多一样的。以上的方法是for直排。不过记得在你页面代码那里加<br/>。如果是直排的，你们就加多几个和popo一样的代码。
例子：
.kaka {
right:25px;
top:5px;
postion:fixed;
}
.baba {
right:35px;
top:5px;
postion:fixed;
}
.jojo {
right:45px;
top:5px;
postion:fixed;
}
就是这样啦~~~一样，right/left的px值是不能一样的。然后呢，刚刚不是说有空着的 a class 吗？把popo这些名字放在不一样的页面代码里面的a class了。
第二，你们可以自己在img 标签里面放style。例子如下：
<img style="position:fixed;top:5px;right:5px;" src="图片网址"/>
就是这样，第二个方法是给那些第一个方法不能成功的。如果你连全部的方法都失败的话，tell me :)
教程已經到尾聲了！如果有什麽不明白的，可以留言發問。我知道這一篇教程很亂/.\ 不好意思哦~~希望可以體諒一下，因為我已經儘量寫了。
完畢·The End
Labels: bs
