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

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

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

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

html部分

创建一个

,给其一个类名center,便于将分页居中;在
标签里面创建
    标签和
  • 标签,ul和li可以制作一个无序列表,因为我们需要点击跳转效果,所以需要在li标签中插入a标签,具体代码如下:

    目前的效果是这样的:

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

    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+css实现静态分页效果的方法

    由图可见,我们的静态html分页效果已经实现了,当鼠标点击分页内容时,被激活的部分呈现绿色,当鼠标悬停在分页内容上会出现灰色,并让整个分页效果出现在页面的中间。

    看完了这篇文章,相信你对html+css实现静态分页效果的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


    文章名称:html+css实现静态分页效果的方法
    标题URL:http://ybzwz.com/article/gisgjh.html