這篇文章主要介紹HTML和CSS如何制作分頁效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創新互聯公司專注于企業成都營銷網站建設、網站重做改版、雨湖網站定制設計、自適應品牌網站建設、html5、商城網站制作、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業務,價格優惠性價比高,為雨湖等各大城市提供網站開發制作服務。
以下是html和CSS實現分頁效果的步驟詳解:
HTML部分:
在頁面中創建一個<ul>標簽和多個<li>標簽,分別給它們一個class類名,便于對其進行CSS樣式設置,ul和li可以制作一個無序列表,因為我們需要點擊跳轉效果,所以需要在li標簽中插入a標簽,具體代碼如下:
<ul class="box modal-4"> <li><a href="#" class="prev"><i class="fa fa-chevron-left"></i> Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#" class="active">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#" class="next"> Next<i class="fa fa-chevron-right"></i></a></li> </ul>
CSS部分:
基本框架已經搭建出來了,現在我們需要用CSS進行美化。首先用float: left讓無序列表左浮動,排列在一行,用text-decoration: none去除a標簽默認的下劃線,用 padding調整間距,給分頁效果添加顏色和鼠標點擊或懸停的效果,具體代碼如下:
.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;}
效果圖:
由圖可見,一個完整的html分頁效果已經制作好了,當鼠標懸停在分頁內容上或者分頁內容被激活時,其呈現深橘黃色,當鼠標離開時則呈現橘黃色。
以上是HTML和CSS如何制作分頁效果的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創新互聯行業資訊頻道!
本文名稱:HTML和CSS如何制作分頁效果
文章源于:http://m.newbst.com/article36/ijsepg.html
成都網站建設公司_創新互聯,為您提供ChatGPT、移動網站建設、用戶體驗、網站營銷、定制網站、網站內鏈
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯