CSS3等相關(guān)屬性制作分頁導(dǎo)航實現(xiàn)代碼
發(fā)布時間：2012-12-24 15:13:52 作者：佚名 
我要評論
我要評論W3cplus第二版本剛上線時，好多位朋友向我問起站上的分頁導(dǎo)航樣式是怎么制作;為了報答各位朋友一持對本站的大力支持，今天我特意把這個分頁導(dǎo)航的效果當(dāng)作一個小教程來說。希望大家會喜歡
W3cplus第二版本剛上線時，好多位朋友向我問起站上的分頁導(dǎo)航樣式是怎么制作，像是圖片一樣。前面都是隨便說了一下制作的過程，為了報答各位朋友一持對本站的大力支持，今天我特意把這個分頁導(dǎo)航的效果當(dāng)作一個小教程來說。希望大家會喜歡。
目標(biāo)
今天我們主要的目的是使用CSS3等相關(guān)屬性來制作W3cplus站點上的分頁導(dǎo)航效果，大家可以這點這里查看站點上的效果，也可以直擊下面的效果圖：
在這個效果中，其實只有兩大看點：
使用CSS3的屬性，制作不規(guī)則圖形效果，并且hover狀態(tài)下會慢慢改變圖形和字體顏色；讓列表水平居中，這個效果我曾多次碰到同學(xué)問怎么使用一個列表居中顯示，并且排在一行，列表還要自適應(yīng)內(nèi)容的寬度?？雌饋韽?fù)雜，其實不難，這也是我下面要重點介紹的一個小技巧。
HTML Markup
有想做東西，我們就需要有材料，我這里所說的材料就是我們分頁導(dǎo)航的HTML Markup，下面我們一起來看看吧：
復(fù)制代碼
代碼如下:<ul class="pager" >
<li class="pager-first first" >
<a class="active" title="到第一頁" href="/css3" >« 首頁 </a>
</li>
<li class="pager-previous" >
<a class="active" title="返回上一個頁面" href="/css3?page=2" >‹ 上一頁 </a>
</li>
<li class="pager-item" >
<a class="active" title="到第 1 頁" href="/css3" >1</a>
</li>
<li class="pager-item" >
<a class="active" title="到第 2 頁" href="/css3?page=1" >2</a>
</li>
<li class="pager-item" >
<a class="active" title="到第 3 頁" href="/css3?page=2" >3</a>
</li>
<li class="pager-current" >4</li>
<li class="pager-item" >
<a class="active" title="到第 5 頁" href="/css3?page=4" >5</a>
</li>
<li class="pager-item" >
<a class="active" title="到第 6 頁" href="/css3?page=5" >6</a>
</li>
<li class="pager-next" >
<a class="active" title="去下一個頁面" href="/css3?page=4" >下一頁 › </a>
</li>
<li class="pager-last last" >
<a class="active" title="到最后一頁" href="/css3?page=5" >尾頁 » </a>
</li>
</ul>
這樣的結(jié)構(gòu)是我常用來制作分頁導(dǎo)航的結(jié)構(gòu)，當(dāng)然大家還有其他的不同結(jié)構(gòu)，今天我們就不去探討這方面的問題。其實這個結(jié)構(gòu)很簡單，我們把每一頁的序號放在了一個“<a>”中，然后對應(yīng)放在列表項中。唯一需要注意的一點就是“當(dāng)前頁”，因為所處當(dāng)前頁是不需要有具有點擊效果，所以我直接將當(dāng)前頁放在一個“li”中，并且命名一個“pager-current”的類名給他，大家可以從Firebug的截圖中來看這樣的區(qū)別：
CSS Code
有了結(jié)構(gòu)，就需要用CSS來美化他：
復(fù)制代碼
代碼如下:body {
font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
}
.pager {
list-style: none outside none;
margin: 20px;
padding: 0;
text-align: center;
}
.pager li {
display: inline-block;
margin: 0;
padding: 0;
}
* html .pager li { display: inline; }
*+html .pager li { display: inline; }
.pager li.pager-current,
.pager li a {
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
color: #FFFFFF;
font-size: 12px;
margin-left: 10px;
padding: 3px 12px;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
text-decoration: none;
zoom:1;
}
.pager li.pager-current {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
color: #d54e21;
font-weight: bold;
}
.pager li a:hover {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
color: #d54e21;
}
上面是DEMO效果所使用的CSS代碼，下面我們一起來細(xì)看一下上面的代碼：
1、不規(guī)則圖形
我在此處主要使用CSS3的border-readius屬性制作的不規(guī)則圓角效果：
復(fù)制代碼
代碼如下:.pager li a
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
}
有關(guān)于其詳細(xì)介紹，大家可以點擊《CSS3的圓角Border-radius》。上面是默認(rèn)狀態(tài)下的效果，那么在hover下改變圖形樣式，我想大家都想到了，是的那就是在“:hover”下改變其風(fēng)格：
復(fù)制代碼
代碼如下:.pager li a:hover {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
}
2、背景色
通過第一步，我們只制作出來不規(guī)則的邊界效果，需要在上面的基礎(chǔ)上加上背景色，這樣填充進(jìn)行就形成了不規(guī)則的圖形，類似于圖片效果。這里填充顏色，使用的是CSS3的漸變屬性——Gradient來實現(xiàn)的：
復(fù)制代碼
代碼如下:.pager li a {
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
}
.pager li a:hover {
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0); /* ie */
color: #d54e21;
}
3、動畫效果
上面完成的只是一個靜態(tài)的CSS3樣式效果，但我們上面的DEMO中是有一個動態(tài)改變背景的效果，這個效果我主要使用了CSS3的transition屬性：
復(fù)制代碼
代碼如下:.pager li a {
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
}
請注意，我們的效果是在“a:hover”狀態(tài)下發(fā)生的，所以大家會以為動畫效果是加載在“a:hover”上，其實不是的，我需要在“a”上設(shè)置一個“transition”屬性，當(dāng)在“a:hover”狀態(tài)下，元素樣式參數(shù)值改變時，就會給我們帶一個動畫效果一樣。具體的使用方法大家可以參閱《CSS3 Transition 》。當(dāng)然大家如果成使用更好的動畫效果，你可以使用CSS3的Animation來作。感興趣的話可以參考animate.css和animatable.css。
4、當(dāng)前項效果
因為我們當(dāng)前項是沒有放在“a”標(biāo)簽中的，為了讓其和其他項樣式一樣，我們需要把當(dāng)前項的樣式和“a”鏈接的樣式設(shè)置成一樣，不同之處是，他的效果類似于“a:hover”效果：
復(fù)制代碼
代碼如下:.pager li.pager-current,
.pager li a {
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
color: #FFFFFF;
font-size: 12px;
margin-left: 10px;
padding: 3px 12px;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
text-decoration: none;
zoom:1;
}
.pager li.pager-current {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
color: #d54e21;
font-weight: bold;
}
5、列表居中
這一點是我今天要特別提出來的一點，大家都知道，我們列表項要放置在一行顯示，需要使用“float”來實現(xiàn)，但是使用了浮動后，我們就無法讓整個分頁導(dǎo)航水平居中，如此一來就會給我們帶來一個兩難境地。那么今天我在這里給大家展示另外一種處理方法：“display:inline-block”來讓列表項顯示在一行，大愛看到這個肯定又說難了，因為其在IE6-7下是無法支持的。這一點大家說的一點不錯，其實我們只需要在IE下稍作處理就ＯＫ了，我們具體來看一下如何實現(xiàn)其水平居中：
復(fù)制代碼
代碼如下:.pager {
text-align: center;/*====讓列表項內(nèi)容居中放====*/
padding: 0;
margin: 20px;
list-style: none outside none;
}
.pager li {
display: inline-block;/*===改變列表項顯示方式為行內(nèi)塊===*/
margin: 0;
padding: 0;
}
起到列表水平居中的效果，我們靠的就是上面的兩句代碼“text-align: center”和“display: inline-block”，但大家寫的時候一定不能放借位置喲，前一句是放在“ul”中，后一句是放在“li”中，我們來看看效果：
從上圖中我們很明顯的看到了，ＩＥ6-7下是無法排在一行中顯示的，那么我們現(xiàn)在來看如何處理他們的兼容問題。我們使用Hack來，讓IE6-7下按另外一種方法顯示：
復(fù)制代碼
代碼如下:[code]
* html .pager li { display: inline; }
*+html .pager li { display: inline; }
.pager li a {
zoom: 1;
}
[/code]
現(xiàn)在我們在來看一下，加上以上代碼后的效果：
現(xiàn)在在所有瀏覽器下都能水平居中了。只是部分瀏覽器不支持CSS3的屬性，這些我們無需理會他了。最后為了讓其更美麗一點，我在這里還使用了css3的其他屬性，比如說text-shadow、box-shadow等等。
那么一個和W3cplus站點一樣的分頁效果就做好了，感興趣的話你也可以動手一試。大家一起來看一下最終效果吧：
相關(guān)文章
- 大家都知道，目前有很多瀏覽器無法實現(xiàn)背景裁切、背景透明度、背景變換和復(fù)雜背景定位等效果;那么這篇文章將詳細(xì)介紹了這幾種背景圖片的處理方法,需要了解的朋友可以參考下2012-12-24
- IE6下CSS背景圖片閃爍的Bug（ie6下的背景圖片緩存問題）2011-07-27
鏈接偽類（:hover）CSS背景圖片有閃動BUG的解決方法
IE6下鏈接偽類（:hover）CSS背景圖片有閃動BUG，主要原因ie會再一次請求這張圖片，或者說圖片沒被緩存。2011-04-28網(wǎng)頁CSS背景圖片使用的測試結(jié)果-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
這篇文章主要講了CSS對背景圖片渲染效率的一些經(jīng)驗和研究，在webjx.com中，還有著類似CSS效率的相關(guān)文章。 樹型結(jié)構(gòu)豎線用樣式表（背景圖）來實現(xiàn)，樣式表背景2008-10-17css利用一張背景圖制作導(dǎo)航菜單實現(xiàn)思路及代碼
利用一張背景圖片來實現(xiàn)菜單的懸停狀態(tài)，沒有什么不可思議完全可以辦得到，僅這一張圖片，我們實現(xiàn)一個橫行CSS菜單。并設(shè)置它們的懸停效果，感興趣的朋友可以參考下哈，希2013-03-28純css實現(xiàn)的六邊形(蜂窩)導(dǎo)航效果(支持hover/兼容瀏覽器)
在之前的文章中曾經(jīng)寫到過一篇“三角形變形記之純css實現(xiàn)的分布導(dǎo)航條效果”，其中用到了邊框?qū)崿F(xiàn)三角形的效果。最近又折騰了一個六邊形的蜂窩效果給大家蹂躪。主要用到了2013-02-057款設(shè)計巧妙的css3飄帶狀3D立體效果的導(dǎo)航菜單和表單窗口
接下來向大家推薦7款設(shè)計巧妙的CSS3飄帶狀菜單和窗口，相當(dāng)不錯的效果，很多都具有3D立體效果，看了相信你一定會喜歡的好了不多說，切入主題，希望本文可以幫助到你，提高2013-02-04不規(guī)則背景墻 CSS實現(xiàn)背景圖片不規(guī)則的導(dǎo)航菜單
一般情況下導(dǎo)航菜單的背景圖片都是比較有規(guī)則的，但是平時我們也會遇到很多背景圖片形狀不規(guī)則導(dǎo)航條比如但鼠標(biāo)移上的時候，背景圖片不規(guī)則，本例只討論此種類型2013-01-02- 不改變html結(jié)構(gòu)，使導(dǎo)航菜單垂直水平居中這個問題應(yīng)該如何解決呢？本文將詳細(xì)介紹，需要了解的朋友可以參考下2012-11-30
純CSS打造Bubble氣泡提示框?qū)崿F(xiàn)代碼
要做一個Bubble氣泡提示框，如果用CSS3特性來做很容易，用圖片來做也可以，但前者有兼容性問題，后者又不夠靈活，用圖片做有一個例子可以看看jquery打造一款側(cè)邊彈出的垂直2011-11-23