W3cplus第二版本剛上線時，好多位朋友向我問起站上的分頁導航樣式是怎么制作，像是圖片一樣。前面都是隨便說了一下制作的過程，為了報答各位朋友一持對本站的大力支持，今天我特意把這個分頁導航的效果當作一個小教程來說。希望大家會喜歡。

今天我們主要的目的是使用CSS3等相關屬性來制作W3cplus站點上的分頁導航效果，大家可以這點擊這里查看站點上的效果，也可以直擊下面的效果圖：

在這個效果中，其實只有兩大看點：

使用CSS3的屬性，制作不規則圖形效果，并且hover狀態下會慢慢改變圖形和字體顏色；讓列表水平居中，這個效果我曾多次碰到同學問怎么使用一個列表居中顯示，并且排在一行，列表還要自適應內容的寬度。看起來復雜，其實不難，這也是我下面要重點介紹的一個小技巧。

有想做東西，我們就需要有材料，我這里所說的材料就是我們分頁導航的HTML Markup，下面我們一起來看看吧：