HTML+CSS实现网页分页页码

最新推荐文章于 2024-08-21 02:14:52 发布

HernSong

最新推荐文章于 2024-08-21 02:14:52 发布

阅读量3.7w

点赞数 23

分类专栏： Web

本文链接：https://blog.csdn.net/qq_36761831/article/details/84075497

版权

直角分页页码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>直角分页页码</title>
<style type="text/css">
	
	/*设置 a 标签的css样式*/
	.page-normal a{
		border: 1px solid #ff6500;
		padding: 5px 7px;
		color: #ff6500;
		margin-left: 20px;/*设置标签 a 之间的间隔*/
		text-decoration: none;/*去除页码数字下面的下划线*/
	}
	/*设置鼠标经过时 a 标签的css样式*/
	.page-normal a:hover{
		background-color: #ffbe94;
	}
	
	/*设置整个div的css样式,该样式主要用于设置网页内的省略号 …… 的样式，并且同时设置内容居中显示*/
	.page-normal{
		color: #ff6500;
		text-align: center;
	}
	
	/*设置当前页面的css样式*/
	.page-normal .page-current{
		color: #ffffff;
		background-color: #ff6500;
	}
	
	/*设置左单括号 < 的css样式*/
	.page-normal .page-prev{
		color: #ffe3c6;
	}
	
	/*进行代码优化，将不同css样式中共有的属性放在一起，有助于提高运行效率*/
	.page-normal a, .page-normal a:hover, .page-normal .page-prev, .page-normal .page-current{
		border: 1px solid #ff650