zdcms分页标签变量写法如下：

{$pages}

使用标签后系统会自动生成分页html代码，代码如下：

<ul class="pagination">
   <li><a>共190条</a></li>
   <li class="active"><a>1</a></li>
   <li><a href="/list-news-2.html" data-ci-pagination-page="2">2</a></li>
   <li><a href="/list-news-3.html" data-ci-pagination-page="3">3</a></li>
   <li><a href="/list-news-4.html" data-ci-pagination-page="4">4</a></li>
   <li><a href="/list-news-5.html" data-ci-pagination-page="5">5</a></li>
   <li><a href="/list-news-2.html" data-ci-pagination-page="2">下一页</a></li>
   <li><a href="/list-news-19.html" data-ci-pagination-page="19">最后一页</a></li>
</ul>

以上分页html代码如果没写css样式访问页面就会是下图的效果：

为了方便大家使用，如果你要求不高，可以直接把下面的css代码复制到你的css样式中：

.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
}

.pagination > li {
	display: inline;
}

.pagination > li > a,
.pagination > li > span {
	position: relative;
	float: left;
	padding: 6px 12px;
	line-height: 1.42857;
	text-decoration: none;
	color: #337ab7;
	background-color: #fff;
	border: 1px solid #ddd;
	margin-left: -1px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
	margin-left: 0;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}

.pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
	z-index: 2;
	color: #23527c;
	background-color: #eeeeee;
	border-color: #ddd;
}

.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
	z-index: 3;
	color: #fff;
	background-color: #337ab7;
	border-color: #337ab7;
	cursor: default;
}

完成上面的步骤后，刷新你的页面会发现样式变了，如下图：

如果你有更个性化的需求，就根据分页的html代码写自己喜欢的css样式吧。

更高级的需求可以参考下面文章：

zdcms自定义分页样式配置