页面BUTTON教程

这教程会有点复杂，不明白的可以发问。

什么是页面BUTTON啊？
如下图：




step 1：

打开设计→修改HTML
然后在『扩展窗口小部件模板』的空格打勾。

同时按着键盘上 Ctrl 和 F，
寻找

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

copy以下代码，放在 <b:loop values='data:links' var='link'> 之前

<ul class='pagebutton'>

然后在 <b:loop values='data:links' var='link'> 下面你会看到类似这样的代码

        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>

你就在这些代码后面再加上

</ul>

所以后面会有两个 </ul> ，如图：



step 2：

完成之后，寻找

]]></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; /*背景颜色*/
}


tips:
● 背景颜色和字体大小可自行修改
●  你也可以在里面加 text-shadow   按我，到 text-shadow 教程
●  也可以在里面加 -moz-border-radius: 10px; 以增加弧度。


囧男有话想说：
其实我只会弄教程，不懂得教啊～