大家在浏览网站时有没有注意到网页上的分页效果，正在学习html和css的小伙伴，你会写静态html分页代码吗？这篇文章就结合实例给大家介绍html分页效果的制作步骤，最后将html分页代码分享给大家，供大家参考，感兴趣的小伙伴可以看看哦。

实现分页效果需要用到很多CSS中的属性，比如float浮动，hover伪类选择器，text-align居中等，如有不清楚的同学可以参考PHP中文网的相关文章，或者访问CSS视频教程，希望可以帮助到你。

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

html部分

创建一个

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

标签里面创建

标签和
• 标签，ul和li可以制作一个无序列表，因为我们需要点击跳转效果，所以需要在li标签中插入a标签，具体代码如下：

  <div>
     <ul>
         <li><a>上一页</a></li>
         <li><a>1</a></li>
         <li><a>2</a></li>
         <li><a>3</a></li>
         <li><a>4</a></li>
         <li><a>5</a></li>
         <li><a>6</a></li>
         <li><a>7</a></li>
         <li><a>8</a></li>
         <li><a>下一页</a></li>
     </ul>
    </div>

  目前的效果是这样的：

  

  CSS部分

  

  使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

  如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

  下载

  由上图可见，目前的页面比较丑，现在我们需要用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实现分页效果，比较详细，初学者可以自己动手尝试，看看你能不能制作出更加炫酷的分页效果，希望这篇文章对你有所帮助！

  【相关教程推荐】

  1. Html视频教程
  2. CSS3最新版参考手册
  3. bootstrap教程 

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！