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