iis服务器助手广告广告
返回顶部
首页 > 资讯 > CMS >分享两个DEDECMS分页样式css代码
  • 589
分享到

分享两个DEDECMS分页样式css代码

DEDECMS分页样式 2022-06-12 01:06:04 589人浏览 独家记忆
摘要

模板中的分页部分页部分源码: 复制代码代码如下: <div class="pagination-wrapper"> <div class="pagination"> {dede:pagelist

模板中的分页部分页部分源码


复制代码代码如下:

<div class="pagination-wrapper">

<div class="pagination">

{dede:pagelist listsize='5' listitem='info,index,end,pre,next,pageno'/}

</div>

</div>

样式一


复制代码代码如下:

.pagination-wrapper {

clear:both;

padding:1em 0 2em 0;

text-align:center;

}

.pagination {

display: inline-block;

*display: inline;

*zoom: 1;

font-size:12px;

border-radius: 3px;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

}

.pagination li{

list-style: none;

display: inline;

float: left;

line-height: 1em;

text-decoration: none;

border: 1px solid #DDD;

border-left-width: 0;

}

.pagination li a {

display: inline-block;

padding: .5em .8em;

background-color: #f9f9f9;

color: #999;

}

.pagination li a:link{

background:#fff;

color: #4C78A5;

}

.pagination li a:hover{

text-decoration:none;

}

.pagination li a:link:hover {

color: #000;

}

.pagination li.thisclass {

background-color: #f9f9f9;

color:#999;

}

.pagination li:first-child {

border-left-width: 1px;

border-radius: 3px 0 0 3px;

}

.pagination li:last-child{

border-radius: 0 3px 3px 0;

}

.pagination .pageinfo{

color: #444;

}

样式二


复制代码代码如下:

.pagination-wrapper{

margin: 20px 0;

}

.pagination{

height: 34px;

text-align: center;

}

.pagination li {

display: inline-block;

height: 34px;

margin-right: 5px;

}

.pagination li a{

float: left;

display: block;

height: 32px;

line-height: 32px;

padding: 0 12px;

font-size: 16px;

border: 1px solid #dddddd;

color: #555555;

text-decoration: none;

}

.pagination li a:hover{

background:#f5f5f5;

color:#0099ff;

}

.pagination li.thisclass {

background: #09f;

color: #fff;

}

.pagination li.thisclass a,.pagination li.thisclass a:hover{

background: transparent;

border-color: #09f;

color: #fff;

cursor: default;

}

--结束END--

本文标题: 分享两个DEDECMS分页样式css代码

本文链接: https://www.lsjlt.com/news/31443.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 分享两个DEDECMS分页样式css代码
    模板中的分页部分页部分源码: 复制代码代码如下: <div class="pagination-wrapper"> <div class="pagination"> {dede:pagelist ...
    99+
    2022-06-12
    DEDECMS 分页样式
  • dedecms 5.6 分页样式代码修改方法
    例如:文章分页问题,每个版本都存在问题但一直也没能很好的解决,随着官方最新的版本dede v5.6的发布,但升级后发现文章分页全部变成竖排了,经多方查找终于解决方法了,现特放出来分享一下 解决方法是:找到/include...
    99+
    2022-06-12
    dedecms 分页样式
  • DEDECMS最为常用的分页标签及分页样式代码
    我们站长使用织梦(dedecms)用来给自己的网站作为内核的还是比较多的,因为属于国产CMS,一来要支持一下,二来算是目前国内CMS中做的最好的 开源程序之一。所以更多的朋友喜欢用来作为网站的内核。我们只需要给自己需要做...
    99+
    2022-06-12
    DEDECMS 分页标签 分页样式
  • div清除浮动css样式代码分享
    这篇文章主要介绍“div清除浮动css样式代码分享”,在日常操作中,相信很多人在div清除浮动css样式代码分享问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”div清除浮动c...
    99+
    2022-10-19
  • 加快DedeCMS文章页显示速度的两个小技巧分享
    第一步 处理文章页的javascript,在默认模板中前面有一大段javascript,可能有2KB多一点,每个页2KG,集少成多也不少了。我就把这段js提取出来,另存为一个文件,以后只要下载一次就可以了。不过注意要把J...
    99+
    2022-06-12
    DedeCMS 文章页 显示速度
  • antDesign自定义分页样式的实现代码
    原图   设计要的效果图 上代码 这里用到了自定义指令,如果大家用不到可以安自己的实际效果开发  创建directive/index.js页面用于把所有自定义...
    99+
    2022-11-13
    antDesign 自定义分页 antDesign 自定义分页样式
  • web开发中css样式代码的示例分析
    小编给大家分享一下web开发中css样式代码的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一.文本设置  1...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作