[教程]Navigation 頁面 Ⅰ ♥
好的，因為有人問所以我寫！XD這次的教程不知道要怎麼標題==所以大概大概這樣咯~~不明白的看圖 :)
ok！看到沒有？啊~就是這個，它會動的~~繼續看下去~~
看到沒有！我都講它會動咯~只要你的鼠標過去，它就會滾下來給你選你要看什麽~很不錯嘞？我也是被這個effect吸引了=3= 現在要換skin都捨不得！
其實這個東西hor~~它是騙你們的眼睛的，你們不相信是嗎？我告訴你們，我把代碼改一下你們就會相信什麽叫blind spot的~盲點的意思XD
看到了嗎？我只是把它們弄成一樣顏色、一樣身高、一樣的長度。好了，廢話少囉嗦了~教程開始吧！
*先聲明，此教程只適合BS，至於BT的朋友可以自己慢慢研究啊！
我們先去找<body>或是</style>。
找到了之後就把以下代碼放在</style>的後面。
<!-------Sidebar-----><div style="background:#fff; width:300px; position:fixed; top:120px; left:50px;">
<img src="圖片網址1" width="200"/></div>
<!-------Navi-----><div style="background:#fff; width:310px; position:fixed; top:120px; left:50px; border-radius:2px; padding:5px; ">
<div class="navibox">顯示的字體<br/><img src="圖片網址2" width="200"/></div>
有看我的教程的朋友一定會明白爲什麽我要把代碼塗到這樣，不明白的去面壁思過！XD開玩笑的啦~~ok！轉入正題橙色的是說明來的，說明那個是我的sidebar咯~亮一點的橙色就是說明那是我的navibox的代碼！
至於其他的代碼自己消化啊~background就是你背景的顏色！記住一定要和navibox的顏色一樣~不一樣也沒關係啦~~製造盲點是有很多方法的XD 圖片就是你要的咯~1和2的放不一樣也可以，一樣也可以，你們喜歡。顯示的字體就是我的“navigation”，你們可以換去別的，如click me！hover me 等。
- div class就是我在引用啦。引用什麽，看下去吧！
我們先把navigation的代碼放在<style>....</style>之間。
.navibox{
width:200px;
height:15px;
font: 12px arial;
color:#FF36A1;
text-align:center;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
overflow:hidden;
}
.navibox:hover{
width:200px;
height:250px;
text-align:center;
}
先給大家解釋解釋。我把那頁面稱為navibox，所以代表你們可以為它改別的名字！比如kiki啊。記得前面一定要放fullstop！因為上面的sidebar我們引用它的navibox嘛~~（CSS引用教程遲些教XD） 簡單來講就是一定要和你div class的名稱一樣！
我們先看看亮紅的.navibox。你們一定要記得它的高度，顏色和寬度要和sidebar的一樣。各位以上的代碼一定都要有在，不在的話就不會呈現很好的結果出來。
- 淺青（width）= 寬度【值越大就越寬】
- 淺藍（height）= 高度【值越大就越高】
- 深紫色（font）= 字體【值越大字體越大 後面是你要用的font family。如：arial，tahoma等】
- 深橙色（color）= 字體顏色
- 淺紫色（text-align）= 字體集中在？【left，左。right，右。center，居中。justify，一致。】
- 深紅的的所有代碼代表你鼠標指過去時，在幾秒鐘內有變化。而overflow的意思遲些CSS代碼教程會發佈。
好，現在看.navibox:hover，就是鼠標指過去后。
- 淺青（width）= 寬度【值越大就越寬】
- 深藍（height）= 高度 【值越大就越高，最好和sidebar的一樣。】
- 淺紫色（text-align）= 字體集中在？【left，左。right，右。center，居中。justify，一致。】
好了，告一段落咯~~不明白嗎？請發問，因為我已經把最基本的代碼給你們了，你們已經可以做出一個navigation出來~你們可以自己加代碼來美化。我還有一樣要告訴大家就是BS的頁面代碼都很相同的，可惜BS的頁面有很多不一樣的名字很難和各位說清楚。
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">顯示的字體1</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="">顯示的字體2</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="">顯示的字體3</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('links').innerHTML" title="">顯示的字體4</a>
以上的代碼代表那個我的灰色格子的頁面。你們可以用自己的BS頁面代碼，每個skin都不一樣的，所以原諒我沒有把它們聲明好來，paiseh~~
還有一件事就是……我發現我錯用了繁體字來編寫教程，看不懂的朋友很抱歉，因為這是後來才發現的，懶惰重打字，所以你們有什麽不明白的可以問我~謝謝。
P/S: 以上教学是博主辛辛苦苦一字一字编出来的
要转帖请告知并附上本blog的大名/鏈接,请别copy : )
版权所有归葆薏優閣 ♥
Copyrighted © 14.11.2012 BaoYogurt
請幫我按按Nuffnang和ChurpChurp，謝謝 :)
The End.
Labels: bs
[教程]Navigation 頁面 Ⅰ ♥
好的，因為有人問所以我寫！XD這次的教程不知道要怎麼標題==所以大概大概這樣咯~~不明白的看圖 :)
ok！看到沒有？啊~就是這個，它會動的~~繼續看下去~~
看到沒有！我都講它會動咯~只要你的鼠標過去，它就會滾下來給你選你要看什麽~很不錯嘞？我也是被這個effect吸引了=3= 現在要換skin都捨不得！
其實這個東西hor~~它是騙你們的眼睛的，你們不相信是嗎？我告訴你們，我把代碼改一下你們就會相信什麽叫blind spot的~盲點的意思XD
看到了嗎？我只是把它們弄成一樣顏色、一樣身高、一樣的長度。好了，廢話少囉嗦了~教程開始吧！
*先聲明，此教程只適合BS，至於BT的朋友可以自己慢慢研究啊！
我們先去找<body>或是</style>。
找到了之後就把以下代碼放在</style>的後面。
<!-------Sidebar-----><div style="background:#fff; width:300px; position:fixed; top:120px; left:50px;">
<img src="圖片網址1" width="200"/></div>
<!-------Navi-----><div style="background:#fff; width:310px; position:fixed; top:120px; left:50px; border-radius:2px; padding:5px; ">
<div class="navibox">顯示的字體<br/><img src="圖片網址2" width="200"/></div>
有看我的教程的朋友一定會明白爲什麽我要把代碼塗到這樣，不明白的去面壁思過！XD開玩笑的啦~~ok！轉入正題橙色的是說明來的，說明那個是我的sidebar咯~亮一點的橙色就是說明那是我的navibox的代碼！
至於其他的代碼自己消化啊~background就是你背景的顏色！記住一定要和navibox的顏色一樣~不一樣也沒關係啦~~製造盲點是有很多方法的XD 圖片就是你要的咯~1和2的放不一樣也可以，一樣也可以，你們喜歡。顯示的字體就是我的“navigation”，你們可以換去別的，如click me！hover me 等。
- div class就是我在引用啦。引用什麽，看下去吧！
我們先把navigation的代碼放在<style>....</style>之間。
.navibox{
width:200px;
height:15px;
font: 12px arial;
color:#FF36A1;
text-align:center;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
overflow:hidden;
}
.navibox:hover{
width:200px;
height:250px;
text-align:center;
}
先給大家解釋解釋。我把那頁面稱為navibox，所以代表你們可以為它改別的名字！比如kiki啊。記得前面一定要放fullstop！因為上面的sidebar我們引用它的navibox嘛~~（CSS引用教程遲些教XD） 簡單來講就是一定要和你div class的名稱一樣！
我們先看看亮紅的.navibox。你們一定要記得它的高度，顏色和寬度要和sidebar的一樣。各位以上的代碼一定都要有在，不在的話就不會呈現很好的結果出來。
- 淺青（width）= 寬度【值越大就越寬】
- 淺藍（height）= 高度【值越大就越高】
- 深紫色（font）= 字體【值越大字體越大 後面是你要用的font family。如：arial，tahoma等】
- 深橙色（color）= 字體顏色
- 淺紫色（text-align）= 字體集中在？【left，左。right，右。center，居中。justify，一致。】
- 深紅的的所有代碼代表你鼠標指過去時，在幾秒鐘內有變化。而overflow的意思遲些CSS代碼教程會發佈。
好，現在看.navibox:hover，就是鼠標指過去后。
- 淺青（width）= 寬度【值越大就越寬】
- 深藍（height）= 高度 【值越大就越高，最好和sidebar的一樣。】
- 淺紫色（text-align）= 字體集中在？【left，左。right，右。center，居中。justify，一致。】
好了，告一段落咯~~不明白嗎？請發問，因為我已經把最基本的代碼給你們了，你們已經可以做出一個navigation出來~你們可以自己加代碼來美化。我還有一樣要告訴大家就是BS的頁面代碼都很相同的，可惜BS的頁面有很多不一樣的名字很難和各位說清楚。
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">顯示的字體1</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="">顯示的字體2</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="">顯示的字體3</a>
<a class="XX" onClick="document.getElementById('main').innerHTML=document.getElementById('links').innerHTML" title="">顯示的字體4</a>
以上的代碼代表那個我的灰色格子的頁面。你們可以用自己的BS頁面代碼，每個skin都不一樣的，所以原諒我沒有把它們聲明好來，paiseh~~
還有一件事就是……我發現我錯用了繁體字來編寫教程，看不懂的朋友很抱歉，因為這是後來才發現的，懶惰重打字，所以你們有什麽不明白的可以問我~謝謝。
P/S: 以上教学是博主辛辛苦苦一字一字编出来的
要转帖请告知并附上本blog的大名/鏈接,请别copy : )
版权所有归葆薏優閣 ♥
Copyrighted © 14.11.2012 BaoYogurt
請幫我按按Nuffnang和ChurpChurp，謝謝 :)
The End.
Labels: bs
Webmistress
Meet The Owner
Name: Claire Wong
Birthday: 27/05/1996
Instagram:clairewong96
Enjoy my journeys! Thanks for your reading!
Blogroll
Past or Future
Affies
Link Exchange
