html怎么实现分页功能

lewis 6年前 (2019-03-30) 阅读数 8 #程序编程

文章标签 html

html中实现分页功能的方法：1、创建html文件；2、添加html代码架构；3、在body标签中使用ul、li标签设计页码数；4、添加script标签并写入css样式代码来实现点击及鼠标悬停的分页样式；5、通过浏览器方式查看设计效果。

具体操作方法：

1.首先创建一个html文件。

2.在html文件中添加html代码架构。

<!DOCTYPEhtml><html>
<head>
<metacharset="UTF-8">
<title>分页效果</title>
</head>
<body>
</body>
</html>

3.然后在html代码架构中的body标签里面使用ul、li标签设计页码数。

<ulclass="pagination"><li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><aclass="active"href="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
<li><ahref="#">6</a></li>
<li><ahref="#">7</a></li>
<li><ahref="#">»</a></li>
</ul>

4.在html架构中的html标签里面添加style标签并写入css样式代码来实现点击及鼠标悬停的分页样式。

<style>ul.pagination{
display:inline-block;
padding:0;
margin:0;
}
ul.paginationli{display:inline;}
ul.paginationlia{
color:black;
float:left;
padding:8px16px;
text-decoration:none;
}
ul.paginationlia.active{
background-color:#4CAF50;
color:white;
}
ul.paginationlia:hover:not(.active){background-color:#ddd;}
</style>

5.最后可通过浏览器方式阅读html文件查看设计效果。

完整示例代码如下：

<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8">
<title>分页效果</title>
<style>
ul.pagination{
display:inline-block;
padding:0;
margin:0;
}
ul.paginationli{display:inline;}
ul.paginationlia{
color:black;
float:left;
padding:8px16px;
text-decoration:none;
}
ul.paginationlia.active{
background-color:#4CAF50;
color:white;
}
ul.paginationlia:hover:not(.active){background-color:#ddd;}
</style>
</head>
<body>
<ulclass="pagination">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><aclass="active"href="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
<li><ahref="#">6</a></li>
<li><ahref="#">7</a></li>
<li><ahref="#">»</a></li>
</ul>
</body>
</html>