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

 

　　以下是html和CSS实现分页效果的步骤详解：

 

　　HTML部分：

 

　　在页面中创建一个<ul>标签和多个<li>标签，分别给它们一个class类名，便于对其进行CSS样式设置，ul和li可以制作一个无序列表，因为我们需要点击跳转效果，所以需要在li标签中插入a标签，具体代码如下：

 

　　<ulclass="boxmodal-4">

 

　　<li><ahref="#"class="prev"><iclass="fafa-chevron-left"></i>Previous</a></li>

 

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

 

　　<li><ahref="#">2</a></li>

 

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

 

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

 

　　<li><ahref="#"class="active">5</a></li>

 

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

 

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

 

　　<li><ahref="#"class="next">Next<iclass="fafa-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;}

 

　　.boxli{display:inline;text-align:center;}

 

　　.boxa{

 

　　float:left;

 

　　display:block;

 

　　font-size:14px;

 

　　text-decoration:none;

 

　　padding:5px12px;

 

　　color:#fff;

 

　　margin-left:-1px;

 

　　border:1pxsolidtransparent;

 

　　line-height:1.5;

 

　　}

 

　　.boxa.active{cursor:default;}

 

　　.boxa:active{outline:none;}

 

　　.modal-4a{

 

　　margin:05px;

 

　　padding:0;

 

　　width:30px;

 

　　height:30px;

 

　　line-height:30px;

 

　　-moz-border-radius:100%;

 

　　-webkit-border-radius:100%;

 

　　border-radius:100%;

 

　　background-color:#F7C12C;

 

　　}

 

　　.modal-4a.prev{

 

　　-moz-border-radius:50px0050px;

 

　　-webkit-border-radius:50px;

 

　　border-radius:50px0050px;

 

　　width:100px;

 

　　}

 

　　.modal-4a.next{

 

　　-moz-border-radius:050px50px0;

 

　　-webkit-border-radius:0;

 

　　border-radius:050px50px0;

 

　　width:100px;

 

　　}

 

　　.modal-4a:hover{background-color:#FFA500;}

 

　　.modal-4a.active,.modal-4a:active{background-color:#FFA100;}

 

　　效果图：

 

　



 

 

　　由图可见，一个完整的html分页效果已经制作好了，当鼠标悬停在分页内容上或者分页内容被激活时，其呈现深橘黄色，当鼠标离开时则呈现橘黄色。

 

　　以上给大家介绍了HTML怎么制作分页效果，比较详细，初学者可以自己动手尝试，看看你能不能制作出更加炫酷的分页效果，希望这篇文章对你有所帮助！




本文转载自中文网