html+css实现静态分页效果的方法

小编给大家分享一下html+css实现静态分页效果的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

成都创新互联公司于2013年开始，先为商丘等服务建站，商丘等地企业，进行企业商务咨询服务。为商丘企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

实例详解html+CSS实现静态分页效果的步骤：

html部分

创建一个

，给其一个类名center，便于将分页居中；在

标签里面创建

标签，ul和li可以制作一个无序列表，因为我们需要点击跳转效果，所以需要在li标签中插入a标签，具体代码如下：
```
   
       上一页
       1
       2
       3
       4
       5
       6
       7
       8
       下一页
   
  
```
目前的效果是这样的：
CSS部分
由上图可见，目前的页面比较丑，现在我们需要用CSS进行美化。首先用float: left让无序列表左浮动，排列在一行，用text-decoration: none去除a标签默认的下划线，用 padding调整间距，给分页效果添加颜色和鼠标点击或悬停的效果，具体代码如下：
```
.page {
       display: inline-block;
       padding: 0;
       margin: 0;
   }   
   .page li {display: inline;}  
   .page li a {
       color: black;
       float: left;
       padding: 8px 16px;
       text-decoration: none;
       transition: background-color .3s;
       border: 1px solid #ddd;
   }   
   .page .active {
       background-color: #4CAF50;
       color: white;
       border: 1px solid #4CAF50;
   }  
   .page a:hover:not(.active) {background-color: #ddd;}   
   .center {text-align: center;}
```
效果如图所示：
由图可见，我们的静态html分页效果已经实现了，当鼠标点击分页内容时，被激活的部分呈现绿色，当鼠标悬停在分页内容上会出现灰色，并让整个分页效果出现在页面的中间。
看完了这篇文章，相信你对html+css实现静态分页效果的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享名称：html+css实现静态分页效果的方法
分享地址：http://cqcxhl.cn/article/gisgjh.html