在网页设计中，分页是常见的功能，用于在大量内容中进行导航，特别是对于博客、论坛和电商网站等。CSS（层叠样式表）是控制网页元素样式的关键工具，能够帮助我们实现美观且功能完善的分页样式。本文将介绍两种基于`a`标签或`li`标签的CSS分页样式，一种是绿色样式，另一种是深蓝色样式。
我们来看第一种绿色分页样式。这种样式基于`a`标签，适用于那些希望保持页面简洁且具有良好兼容性的设计。代码中定义了`.pages`类作为分页容器，设置了宽度、对齐方式、内边距等属性。接着，通过`.pages span`、`.pages a`、`.pages b`等选择器来设定不同元素的样式，例如字体大小、颜色、边框、背景色以及鼠标悬停时的效果。其中，`a`标签的默认样式被重置为无下划线，且在鼠标悬停时背景变为绿色，文字颜色变为白色，提供清晰的视觉反馈。
```css
.pages {
width: 100.5%;
text-align: right;
padding: 10px 0;
clear: both;
}
.pages span, .pages a, .pages b {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin: 0 2px;
}
.pages span font {
color: #f00;
font-size: 12px;
}
.pages a, .pages b {
border: 1px solid #5FA623;
background: #fff;
padding: 2px 6px;
text-decoration: none;
}
.pages span {
padding-right: 10px;
}
.pages b, .pages a:hover {
background: #7AB63F;
color: #fff;
}
```
接下来是第二种深蓝色分页样式，同样支持自定义颜色。在这个例子中，使用了`ul`和`li`元素来构建分页结构。CSS样式定义了全局样式，如零内外边距、字体大小和类型，以及`a`标签的基本样式。分页列表`#pagelist`设置了宽度、居中对齐和内边距，`li`元素则设置为浮动左对齐，具有边框和内边距，以创建分隔的效果。`a`标签在列表中作为块级元素显示，且在鼠标悬停时背景色变为深蓝色，颜色变为白色。
```css
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
font-family: Verdana;
}
a {
color: #333;
text-decoration: none;
}
ul {
list-style: none;
}
#pagelist {
width: 600px;
margin: 30px auto;
padding: 6px 0px;
height: 20px;
}
#pagelist ul li {
float: left;
border: 1px solid #5d9cdf;
height: 20px;
line-height: 20px;
margin: 0px 2px;
}
#pagelist ul li a, .pageinfo {
display: block;
}
```
这两种CSS分页样式都是通过调整颜色、边框、内边距和布局来实现的，它们展示了如何使用CSS来定制分页的视觉效果。通过结合HTML结构和CSS样式，可以创建出各种各样的分页设计，满足不同网站的需求。无论是绿色还是深蓝色，这些样式都可以作为起点，进一步根据品牌指南或个人喜好进行调整。同时，注意保持良好的浏览器兼容性，确保在多种设备和浏览器上都能正常显示。
