CSS的上一页、下一页代码十分常见,不仅可以用于页面分页展示,还可以帮助用户更方便地浏览网页。下面是一些常见的CSS上一页下一页代码参考:/* 分页代码 */ .page { display: fle
CSS的上一页、下一页代码十分常见,不仅可以用于页面分页展示,还可以帮助用户更方便地浏览网页。下面是一些常见的CSS上一页下一页代码参考:
/* 分页代码 */ .page { display: flex; justify-content: center; align-items: center; margin: 20px 0; } .page a { background-color: #eee; color: #333; font-size: 14px; padding: 6px 10px; margin: 0 5px; border-radius: 5px; text-decoration: none; } .page a:hover { background-color: #333; color: #fff; } .page .prev, .page .next { font-weight: bold; margin: 0; } .page .disabled { pointer-events: none; } /* 上一页、下一页代码 */ .prev { border: none; cursor: pointer; outline: none; padding: 6px 10px; border-radius: 5px 0 0 5px; background-color: #eee; color: #333; font-size: 14px; margin-right: -1px; } .prev:hover { background-color: #333; color: #fff; } .next { border: none; cursor: pointer; outline: none; padding: 6px 10px; border-radius: 0 5px 5px 0; background-color: #eee; color: #333; font-size: 14px; margin-left: -1px; } .next:hover { background-color: #333; color: #fff; }
在上述代码中,我们先定义了一个page类,用于页面的分页展示,并对其中的a标签进行样式设置。接着,我们单独定义了上一页、下一页的样式,分别为prev和next类。这两个类内设置了常见的样式设置,如背景色、字体颜色、边框等等,同时我们还设置了悬停时的状态。
最后,通过将page类和上一页、下一页类应用到相应的HTML元素上,就可以实现带有上一页、下一页功能的分页了。
粉丝
0
关注
0
收藏
0