這篇文章主要介紹HTML和CSS如何制作分頁(yè)效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營(yíng)產(chǎn)品：響應(yīng)式網(wǎng)站開(kāi)發(fā)、成都品牌網(wǎng)站建設(shè)、成都營(yíng)銷網(wǎng)站建設(shè)。我們專注企業(yè)品牌在網(wǎng)站中的整體樹(shù)立，網(wǎng)絡(luò)互動(dòng)的體驗(yàn)，以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。成都做網(wǎng)站、成都網(wǎng)站建設(shè)、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營(yíng)、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

以下是html和CSS實(shí)現(xiàn)分頁(yè)效果的步驟詳解：

HTML部分：

在頁(yè)面中創(chuàng)建一個(gè)

標(biāo)簽和多個(gè)
• 標(biāo)簽，分別給它們一個(gè)class類名，便于對(duì)其進(jìn)行CSS樣式設(shè)置，ul和li可以制作一個(gè)無(wú)序列表，因?yàn)槲覀冃枰c(diǎn)擊跳轉(zhuǎn)效果，所以需要在li標(biāo)簽中插入a標(biāo)簽，具體代碼如下：

  
   Previous
  1
  2
  3
  4
  5
  6
  7
   Next
  

  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)的下劃線，用 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和CSS如何制作分頁(yè)效果的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

  
  文章題目：HTML和CSS如何制作分頁(yè)效果-創(chuàng)新互聯(lián)
  瀏覽路徑：http://weahome.cn/article/dpdpcg.html