html+css如何实现静态分页效果

这篇文章给大家分享的是有关html+css如何实现静态分页效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、做网站、分宜网络推广、重庆小程序开发、分宜网络营销、分宜企业策划、分宜品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供分宜建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

html部分

创建一个

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

  • 上一页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 下一页

目前的效果是这样的:

bb.jpg

CSS部分

由上图可见,目前的页面比较丑,现在我们需要用CSS进行美化。首先用float:left让无序列表左浮动,排列在一行,用text-decoration:none去除a标签默认的下划线,用padding调整间距,给分页效果添加颜色和鼠标点击或悬停的效果,具体代码如下:

.page{

display:inline-block;

padding:0;

margin:0;

}

.pageli{display:inline;}

.pagelia{

color:black;

float:left;

padding:8px16px;

text-decoration:none;

transition:background-color.3s;

border:1pxsolid#ddd;

}

.page.active{

background-color:#4CAF50;

color:white;

border:1pxsolid#4CAF50;

}

.pagea:hover:not(.active){background-color:#ddd;}

.center{text-align:center;}

html+css如何实现静态分页效果html+css如何实现静态分页效果

感谢各位的阅读!关于“html+css如何实现静态分页效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网页题目:html+css如何实现静态分页效果
文章分享:http://scyanting.com/article/pcejed.html