91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

html怎么實現分頁功能

小新
2702
2021-05-18 17:13:49
欄目: 編程語言

html中實現分頁功能的方法:1、創建html文件;2、添加html代碼架構;3、在body標簽中使用ul、li標簽設計頁碼數;4、添加script標簽并寫入css樣式代碼來實現點擊及鼠標懸停的分頁樣式;5、通過瀏覽器方式查看設計效果。


html怎么實現分頁功能

具體操作方法:

1.首先創建一個html文件。

2.在html文件中添加html代碼架構。

<!DOCTYPE html>

<html>

    <head>

<meta charset="UTF-8">

        <title>分頁效果</title>

    </head>

    <body>

    </body>

</html>

3.然后在html代碼架構中的body標簽里面使用ul、li標簽設計頁碼數。

<ul class="pagination">

  <li><a href="#">?</a></li>

  <li><a href="#">1</a></li>

  <li><a class="active" href="#">2</a></li>

  <li><a href="#">3</a></li>

  <li><a href="#">4</a></li>

  <li><a href="#">5</a></li>

  <li><a href="#">6</a></li>

  <li><a href="#">7</a></li>

  <li><a href="#">?</a></li>

</ul>

4.在html架構中的html標簽里面添加style標簽并寫入css樣式代碼來實現點擊及鼠標懸停的分頁樣式。

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}

ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

5.最后可通過瀏覽器方式閱讀html文件查看設計效果。

完整示例代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>分頁效果</title> 

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}

ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<ul class="pagination">

  <li><a href="#">?</a></li>

  <li><a href="#">1</a></li>

  <li><a class="active" href="#">2</a></li>

  <li><a href="#">3</a></li>

  <li><a href="#">4</a></li>

  <li><a href="#">5</a></li>

  <li><a href="#">6</a></li>

  <li><a href="#">7</a></li>

  <li><a href="#">?</a></li>

</ul>

</body>

</html>


0
家居| 定日县| 潮州市| 阳山县| 彭州市| 安图县| 北流市| 辽源市| 洛阳市| 漳浦县| 博爱县| 德化县| 东辽县| 晋宁县| 上饶市| 乐山市| 徐汇区| 布尔津县| 眉山市| 莱西市| 社会| 宁乡县| 青铜峡市| 彭山县| 册亨县| 凌海市| 平昌县| 安阳市| 孝感市| 湄潭县| 平利县| 科技| 图木舒克市| 彰化县| 长阳| 阳原县| 河北区| 平山县| 横山县| 仁布县| 安溪县|