dede分页样式css代码-DEDE建站-盈思创科技

DedeCMS 的分页结构相对固定，我们可以通过 CSS 来轻松地美化它，使其更现代化、更美观。

（图片来源网络，侵删）

DedeCMS 默认分页 HTML 结构

在修改 CSS 之前，我们先了解其默认的 HTML 结构，这有助于我们精准地选择和修改元素。

<div class="dede_pages">
  <ul class="pagelist">
    <li><span class="pageinfo">共 <strong>45</strong> 页 / <strong>896</strong> 条记录</span></li>
    <li><a class="prev" href="list_1_1.html">上一页</a></li>
    <li><a href="list_1_1.html">1</a></li>
    <li><span class="pageinfo">...</span></li>
    <li><a href="list_1_5.html">5</a></li>
    <li><span class="pageinfo">6</span></li> <!-- 当前页 -->
    <li><a href="list_1_7.html">7</a></li>
    <li><a href="list_1_8.html">8</a></li>
    <li><span class="pageinfo">...</span></li>
    <li><a href="list_1_45.html">45</a></li>
    <li><a class="next" href="list_1_7.html">下一页</a></li>
    <li><select name="sldd" onchange="location.href=this.options[this.selectedIndex].value;">
      <option value='list_1_1.html'>第1页</option>
      <option value='list_1_2.html'>第2页</option>
      ...
    </select></li>
  </ul>
</div>

关键类名和标签说明：

.dede_pages: 分页容器
.pagelist: 分页列表容器
li: 每个分页项的容器
a: 可点击的链接（页码、上一页、下一页）
span: 不可点击的文本（当前页、总页数、省略号）
.prev: 上一页链接
.next: 下一页链接
select: 跳页下拉框

基础美化 CSS 代码（简洁版）

这段代码可以实现一个清爽、简洁的分页样式，适合大多数网站。

/* 分页容器 */
.dede_pages {
  margin: 20px 0;
  text-align: center;
  font-size: 14px;
}
/* 分页列表 */
.dede_pages .pagelist {
  display: inline-block; /* 让列表在一行内显示 */
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 每个分页项 */
.dede_pages .pagelist li {
  float: left; /* 使列表项横向排列 */
  margin: 0 5px;
}
/* 所有链接和文本的通用样式 */
.dede_pages .pagelist li a,
.dede_pages .pagelist li span {
  display: block; /* 填满整个 li */
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px; /* 圆角 */
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease; /* 添加过渡效果 */
}
/* 链接的悬停效果 */
.dede_pages .pagelist li a:hover {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}
/* 当前页的样式 */
.dede_pages .pagelist li span {
  background-color: #f0f0f0;
  color: #999;
  border-color: #f0f0f0;
  cursor: default; /* 鼠标指针默认 */
}
/* 上一页/下一页特殊样式 */
.dede_pages .pagelist li.prev a,
.dede_pages .pagelist li.next a {
  font-weight: bold;
}
/* 跳页下拉框 */
.dede_pages .pagelist li select {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-left: 10px;
}

现代化风格 CSS 代码（推荐）

这个版本参考了 Bootstrap 的分页样式，外观更专业、现代，包含悬停、禁用等状态。

（图片来源网络，侵删）

/* 1. 重置和基础样式 */
.dede_pages {
  margin: 30px 0;
  text-align: center;
}
.dede_pages .pagelist {
  display: inline-flex; /* 使用 flexbox 布局，更灵活 */
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dede_pages .pagelist li {
  margin: 0;
}
.dede_pages .pagelist li + li {
  margin-left: 5px; /* 项之间的间距 */
}
/* 2. 所有链接和文本的基础样式 */
.dede_pages .pagelist li > a,
.dede_pages .pagelist li > span {
  position: relative;
  float: left; /* 为了兼容旧浏览器，同时保留 flex 布局 */
  padding: 8px 16px;
  line-height: 1.5;
  text-decoration: none;
  color: #337ab7;
  background-color: #fff;
  border: 1px solid #ddd;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
/* 3. 链接的悬停状态 */
.dede_pages .pagelist li > a:hover,
.dede_pages .pagelist li > a:focus {
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
/* 4. 当前页/禁用状态 */
.dede_pages .pagelist li.active > span {
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.dede_pages .pagelist li.disabled > span {
  color: #999;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
/* 5. 省略号样式 */
.dede_pages .pagelist li > span.pageinfo {
  padding: 8px 16px;
  color: #999;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  cursor: default;
}
/* 6. 上一页/下一页 */
.dede_pages .pagelist li.prev a,
.dede_pages .pagelist li.next a {
  font-weight: bold;
}
/* 7. 跳页下拉框 */
.dede_pages .pagelist li select {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-left: 10px;
  cursor: pointer;
}

如何使用

找到 CSS 文件：登录您的网站后台，进入【模板】->【默认模板管理】->【CSS 模板目录】，通常文件名为 style.css 或 main.css。
添加代码：将您选择的 CSS 代码复制并粘贴到该 CSS 文件的末尾。
保存并更新：保存 CSS 文件，然后到前台页面刷新缓存（按 Ctrl + F5），即可看到效果。

高级定制：使用 CSS 变量 (推荐)

为了更灵活地控制分页颜色,建议使用 CSS 变量，这样您只需修改一处颜色，就能改变整个分页的配色方案。

在 CSS 文件的 root 选择器中定义变量：

:root {
  --pagination-bg: #fff;
  --pagination-border: #ddd;
  --pagination-color: #337ab7;
  --pagination-hover-bg: #eee;
  --pagination-hover-color: #23527c;
  --pagination-active-bg: #337ab7;
  --pagination-active-color: #fff;
  --pagination-disabled-color: #999;
  --pagination-radius: 4px;
  --pagination-padding: 8px 16px;
  --pagination-margin-item: 5px;
}

修改分页 CSS，使用 var() 函数调用变量：

.dede_pages .pagelist {
  /* ... 其他样式 ... */
  border-radius: var(--pagination-radius);
}
.dede_pages .pagelist li {
  margin: 0;
}
.dede_pages .pagelist li + li {
  margin-left: var(--pagination-margin-item);
}
.dede_pages .pagelist li > a,
.dede_pages .pagelist li > span {
  padding: var(--pagination-padding);
  color: var(--pagination-color);
  background-color: var(--pagination-bg);
  border: 1px solid var(--pagination-border);
}
.dede_pages .pagelist li > a:hover,
.dede_pages .pagelist li > a:focus {
  color: var(--pagination-hover-color);
  background-color: var(--pagination-hover-bg);
}
.dede_pages .pagelist li.active > span {
  color: var(--pagination-active-color);
  background-color: var(--pagination-active-bg);
  border-color: var(--pagination-active-bg);
}
/* ... 其他样式也相应替换变量 ... */

优势：当您想更换主题色时，只需修改 root 里的变量值，所有分页的颜色都会自动更新，非常方便。

希望这些代码和教程能帮助您美化 DedeCMS 的分页功能！

dede分页样式css代码

DedeCMS 默认分页 HTML 结构

基础美化 CSS 代码（简洁版）

现代化风格 CSS 代码（推荐）

如何使用

高级定制：使用 CSS 变量 (推荐)

相关文章

目录[+]