博主:Moony和梨子

博主目前狀態: 要考試了(淚奔——

對部落格有疑問?:点击发表疑問
對這裡有啥意见?:点击发表意见


"不要認為你做不到,很多事情只是看你願意花多少心思去做而已"

如何 設計 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 你的顏色代碼


有問題就要發問哦~在此帖留言就行了
當然不要做到一半就說不會啊 ><
給多點耐心吧 :))  祝大家成功哦 :))

4 comments:

  1. 添加在 .pagebutton xxxx { 的里面 就可以了}

    不明白这一句在说什么??

    ReplyDelete
    Replies
    1. pagebutton xxx{ 的意思是

      如這種:
      .pagebutton li a{

      .pagebutton li.selected a{

      .pagebutton a:hover {

      所謂"的里面就是:

      如:

      .pagebutton li.selected a{
      background:url( 圖片url ) repeat;
      font-weight:bold;
      }

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. 你好.请问如何制作页面?

    ReplyDelete

有任何疑问,就请留言 :)
先声明:不接受恶意批评与留言。

欢迎再次光临。
谢谢。

------------月梨心---------------