如何 設計 Pages/頁面 的 按鈕 ?

KC: 你好,我想问你会不会在按扭上加字的教程?是页面来的,可是是可以随意加字的.

這就是你的回答哦 :)
只要把你的頁面名字改掉就可以 "隨意加字"了 :))
我也附上了 如何設計 頁面 的教程，

這是給大家的，我所謂的頁面就是 :

那些頁面名字是有點花痴 ><''' 無視吧

不過可能 新模板 可能不太適合。

這教程可能會有點亂，所以希望大家明白哦 :))

一切圖片 點擊 來放大哦！！！

首先，去设计(Design)>>Edit HTML

然後 在 擴展窗口小部件模板  打個勾

按Ctrl+F或F3找以下代码

<b:loop values='data:links' var='link'>

你會找到有兩個 <b:loop values='data:links' var='link'> , 不過要的是 第二行的

如圖 :

過後呢，在 <b:loop values='data:links' var='link'> 的上面 粘貼 以下代碼

<ul class='pagebutton'>

接著，拉下去一點你會看到 </ul> 

你就在</ul> 下面再添加 多一個 </ul>

整體上就是這樣吧 :)

那些淺青色的 HIGHLIGHT 都是剛剛我教大家添加的 代碼

好了就到這裡 上半段完成了。

先 預覽/Preview 看看，沒有問題後，再把它儲存/Save 起來哦

儲存了過後，再按Ctrl+F或F3找以下代码

]]></b:skin>

在 ]]></b:skin> 的上面 粘貼 以下代碼

* pagebutton
----------------------------------------------- */
.pagebutton li a{
padding:5px;
background:#000000;
text-decoration: none;
margin: 0;
font-size:12px;
}
.pagebutton li.selected a{
font-weight:bold;
background:#cccccc;
}
.pagebutton a:hover {
background:#eeeeee;
}

首先要講明的就是 :

.pagebutton li a{  是 頁面按鈕原本的效果.pagebutton li.selected a{ 是 已經選擇了的效果 .pagebutton a:hover { 是 鼠標經過 頁面按鈕 的 效果光我這樣說可能不怎麼明白，試過就會知道了哦 :))

當然的，紅色字體的都可以自行更改哦 :))

Background 就是 背景 

Font-size 就是 字體的大小

[----------------------------------------------------------------------------]

除此之外你還可以添加更多的 裝飾～～～～

這些 代碼 只是需要添加在 .pagebutton xxxx { 的里面 就可以了} 

為頁面按鈕 添加 背景 :

background:url( 圖片url ) repeat;

為頁面按鈕 添加 框框 : 

border: 1px solid #000000; 

1px = 框框的粗度

除了solid 也有 dashed, dotted, inset, outset, double 

#000000 你的顏色代碼

為頁面按鈕 添加 圓角框 :

border-radius:10px

要更多就請參考 這裡

為頁面按鈕的字體 添加 影子 :

text-shadow:3px 3px 3px #000000;

3px 3px 3px 都是 Padding [ 自己改一改就會明白，如果要更詳細留言在此帖我會告訴你 ]

#000000 你的顏色代碼

有問題就要發問哦～在此帖留言就行了

當然不要做到一半就說不會啊 ><

給多點耐心吧 :))  祝大家成功哦 :))