反逆的御宅族( ACG OTAKU OF THE REBELLION)

今天分享改最底端的頁數樣式囉，原本像螞蟻一樣大的大小真是令人抓狂呀，原本寫痞客邦CSS的人到底在想什麼(@A@)，現在改成連阿公都可以看見與舒服的樣式囉！快來看看吧~

前往後台CSS原始碼使用ctrl+F找到.page，再跟大家說明一下，這邊都是使用傳統痞客邦三欄式的來修改，使用最近推出有質感的那種介面，語法過於複雜而且沒有整理擠成一堆，建議用傳統兩欄或三欄修改喔！

裡面page有一個text-align，原則上應該是 center置中，不需要更動但還是說明下，如要更動也可以設成left(靠左)或right(靠右)

語法

text-align: center;

 

找到.page a, .page span{}

裡面是設定沒有任何顏色的頁數框框，前面.page a, .page span沒有作任何更動，以免會有錯誤發生。

語法

.page a, .page span {
border: 邊框看要設多少px，加dotted就是虛線，#顏色號碼。都可以自行調整更改喔。
font-size:設定數字大小多少px，可以自行修改。
color: 數字的顏色，目前樣式設定灰黑色，可以自行找找顏色號碼喔。(灰黑ex:#53585b)。
padding:框框內上下距與左右距，我是設定1px 10px;。
margin: 彼此間的外距，我設定0 9px 0 0，單純設定右邊9px差不多剛好，四個數字依序是 上、右、下、左。
-webkit-border-radius:設定邊邊圓角弧度，webkit是專門為蘋果、谷歌瀏覽器而編寫的CSS。
-moz-border-radius: 設定邊邊圓角弧度，moz是專門為火狐瀏覽器而編寫的CSS。
border-radius:剩下一些其他的也一起用border-radius啦，反正就是為了瀏覽器而寫的三行，為了設定圓弧，我是使用3px感覺最好看。
}

 

設定滑鼠移入後樣式的變化，我設定color為白色，background為#58b2dc這個顏色，可以自行更改。

 

語法

.page a:hover { 
color:#FFF;
background: #58b2dc; 
}

這裡是目前頁面所顯示的樣式，也可以做調整更改喔。

 

我的文字color一樣是部落格主顏色 #58b2dc，background選淡一些的#daebf5淺藍，大家可以再自行修改。

語法

.page span {
color: #58b2dc;
background: #daebf5;

}

頁尾底的頁數樣式也是蠻重要的，可以讓原本找螞蟻一樣的小頁數變成阿公也能找到的樣式！我在其他網站也有看到一些不錯的樣式，不過在框框圓角設定(border-radius)上沒法達到效果，再多研究之後有機會再跟大家分享囉！