實(shí)現(xiàn)分頁(yè)效果需要用到很多CSS中的屬性,比如float浮動(dòng),hover偽類(lèi)選擇器,等等,如有不清楚的同學(xué)可以參考PHP 的相關(guān)文章,或者訪(fǎng)問(wèn) CSS視頻教程,希望可以幫助到你。
以下是html和CSS實(shí)現(xiàn)分頁(yè)效果的步驟詳解:
HTML部分:
在頁(yè)面中創(chuàng)建一個(gè) ul 標(biāo)簽和多個(gè) li 標(biāo)簽,分別給它們一個(gè)class類(lèi)名,便于對(duì)其進(jìn)行CSS樣式設(shè)置,ul和li可以制作一個(gè)無(wú)序列表,因?yàn)槲覀冃枰c(diǎn)擊跳轉(zhuǎn)效果,所以需要在li標(biāo)簽中插入a標(biāo)簽,具體代碼如下:
ul >CSS部分:
基本框架已經(jīng)搭建出來(lái)了,現(xiàn)在我們需要用CSS進(jìn)行美化。首先用float: left讓無(wú)序列表左浮動(dòng),排列在一行,用text-decoration: none去除a標(biāo)簽?zāi)J(rèn)的下劃線(xiàn),用 padding調(diào)整間距,給分頁(yè)效果添加顏色和鼠標(biāo)點(diǎn)擊或懸停的效果,具體代碼如下:
.box {list-style: none;display: inline-block;padding: 0;margin-top: 10px;}.box li {display: inline;text-align: center;}.box a {float: left;display: block;font-size: 14px;text-decoration: none;padding: 5px 12px;color: #fff;margin-left: -1px;border: 1px solid transparent;line-height: 1.5;.box a.active {cursor: default;}.box a:active {outline: none;}.modal-4 a {margin: 0 5px;padding: 0;width: 30px;height: 30px;line-height: 30px;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;background-color: #F7C12C;.modal-4 a.prev {-moz-border-radius: 50px 0 0 50px;-webkit-border-radius: 50px;border-radius: 50px 0 0 50px;width: 100px;.modal-4 a.next {-moz-border-radius: 0 50px 50px 0;-webkit-border-radius: 0;border-radius: 0 50px 50px 0;width: 100px;.modal-4 a:hover {background-color: #FFA500;}.modal-4 a.active,.modal-4 a:active {background-color: #FFA100;}效果圖:
由圖可見(jiàn),一個(gè)完整的html分頁(yè)效果已經(jīng)制作好了,當(dāng)鼠標(biāo)懸停在分頁(yè)內(nèi)容上或者分頁(yè)內(nèi)容被激活時(shí),其呈現(xiàn)深橘黃色,當(dāng)鼠標(biāo)離開(kāi)時(shí)則呈現(xiàn)橘黃色。
以上給大家介紹了HTML怎么制作分頁(yè)效果,比較詳細(xì),初學(xué)者可以自己動(dòng)手嘗試,看看你能不能制作出更加炫酷的分頁(yè)效果,希望這篇文章對(duì)你有所幫助!
【相關(guān)教程推薦】
1. Html教程
2. CSS3最新版參考手冊(cè)
3. HTML5完整版手冊(cè)以上就是圖文詳解HTML和CSS怎么制作分頁(yè)效果的詳細(xì)內(nèi)容,其它編程語(yǔ)言
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注