html直接分页的样式,HTML分页样式「建议收藏」

html直接分页的样式,HTML分页样式「建议收藏」.container{background:#fdfdfd;padding:1rem;margin:3remauto;border-radius:0.2rem;counter-reset:pagination;text-align:center;}.container:after{clear:both;content:””;display:table;}.container…

大家好,又见面了,我是你们的朋友全栈君。

.container {

background: #fdfdfd;

padding: 1rem;

margin: 3rem auto;

border-radius: 0.2rem;

counter-reset: pagination;

text-align: center;

}

.container:after {

clear: both;

content: “”;

display: table;

}

.container ul {

width: 100%;

}

.large {

width: 45rem;

}

.pagination ul, li {

list-style: none;

display: inline;

padding-left: 0px;

}

.pagination li {

counter-increment: pagination;

}

.pagination li:hover a {

color: #fdfdfd;

background-color: #1d1f20;

border: solid 1px #1d1f20;

}

.pagination li.active a {

color: #fdfdfd;

background-color: #1d1f20;

border: solid 1px #1d1f20;

}

.pagination li:first-child a:after {

content: “”;

}

.pagination li a {

border: solid 1px #d6d6d6;

border-radius: 0.2rem;

color: #7d7d7d;

text-decoration: none;

text-transform: uppercase;

display: inline-block;

text-align: center;

padding: 0.5rem 0.9rem;

}

.pagination li a:after {

content: ” ” counter(pagination) ” “;

}

.large li a {

display: none;

}

.large li:first-child a {

display: inline-block;

}

.large li:first-child a:after {

content: “”;

}

.large li:nth-last-child(2) a {

display: inline-block;

}

.large li:nth-last-child(3) {

display: inline-block;

}

.large li:nth-last-child(3):after {

padding: 0 1rem;

content: “…”;

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/160613.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Alex 的 Hadoop 菜鸟教程: 第9课 zookeeper 介绍和使用

    Alex 的 Hadoop 菜鸟教程: 第9课 zookeeper 介绍和使用看了之前的教程,会发现多处出现zookeeper,比如hadoop的autofailover得用zookeeper,Hbase的RegionServer也得用zookeeper。其实不止hadoop,包括现在小有名气的Storm用的也是zookeeper。那么zookeeper究竟是做什么用的?

    2022年5月31日
  • navigator.appName

    navigator.appName找了很多的参考,无外乎两句话,兼容性和缅怀网景我就很好奇,到底在兼容什么然后翻到一篇外文的提问,里面提及了DOM0然后去了解了一下DOM0…看了介绍之后,就是不太推荐使用的标签监听属性on事件名,不过这文章有提到DOM0具有极好的跨浏览器优势,所以可能appName就是在这方面的支持吧,如果有知道的大佬请留个言,解释一下吧,老纠结了….

    2022年9月12日
  • rpc接口怎么写_rpcbind服务端口

    rpc接口怎么写_rpcbind服务端口编写更安全的RPC接口前言在一般的RPC应用当中,作为开发人员一般分为了三种,第一种就是提供RPC服务的开发人员,第二种就是客户端使用RPC服务的开发人员,以及最重要的设计RPC接口和规范RPC接口的开发人员,前面的案例当中我们将三种角色融在了一起,虽然看起来非常的方便,但是非常的不利于后期的维护以及二次开发RPC接口规范如果要冲高HelloService服务,第一步需要明确服务的名字以及接口(HelloService服务在上两篇博客)constHelloServiceName=”path/to

    2022年10月13日
  • 【强化学习】DDPG(Deep Deterministic Policy Gradient)算法详解[通俗易懂]

    【强化学习】DDPG(Deep Deterministic Policy Gradient)算法详解[通俗易懂]http://www0.cs.ucl.ac.uk/staff/d.silver/web/Teaching.html引自ReinforcementLearning:AnIntroduction强化学习名著2018新编版DPG论文http://www0.cs.ucl.ac.uk/staff/d.silver/web/Applications_files/determinis…

    2022年6月15日
  • 在Java中,关于a=a+b与a+=b的区别「建议收藏」

    在Java中,关于a=a+b与a+=b的区别「建议收藏」在Java中,关于a=a+b与a+=b的区别

    2022年4月23日
  • JS生成guid方法

    JS生成guid方法

    2022年4月2日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号