CSS实现分页详细实现代码 _CSS分类

分页用于将内容分成简短且易于理解的离散页面。 Materialize CSS提供了一些类来创建一个分页栏, 该分页栏包含指向其他页面的链接。
的分页class用于将< ul> 列表元素设置为分页组件。必须显示的页面在此组件内定义为< li> 项。左右箭头图标可用于显示用于移至下一页或上一页的按钮。
语法如下：

< ul class="pagination"> < li class="disabled"> < a href="https://www.lsbin.com/#!"> < i class="material-icons"> chevron_left< /i> < /a> < /li> < li class="active"> < a href="https://www.lsbin.com/#!"> 1< /a> < /li> < li class="waves-effect"> < a href="https://www.lsbin.com/#!"> 2< /a> < /li> < li class="waves-effect"> < a href="https://www.lsbin.com/#!"> 3< /a> < /li> < li class="waves-effect"> < a href="https://www.lsbin.com/#!"> < i class="material-icons"> chevron_right< /i> < /a> < /li> < /ul>

例子：
的HTML

< html > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < !-- Import Material Icon Fonts --> < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" > < !-- Include Compiled and minified Materialize CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" > < !-- Include jQuery --> < script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js" > < / script > < !-- Compiled and minified Materialize JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / head > < body > < div class = "card-panel" > < h3 class = "center" > Pagination < / h3 > < !-- Use the pagination class --> < ul class = "pagination center-align" > < !-- Use icon inside list item for the left arrow --> < li class = "disabled" > < a href = "https://www.lsbin.com/#!" > < i class = "material-icons" > chevron_left < / i > < / a > < / li > < !-- Various classes that can be used with the page links --> < li class = "waves-effect" > < a href = "https://www.lsbin.com/#!" > 1< / a > < / li > < li class = "active green" > < a href = "https://www.lsbin.com/#!" > 2< / a > < / li > < li class = "waves-effect" > < a href = "https://www.lsbin.com/#!" > 3< / a > < / li > < li class = "waves-effect" > < a href = "https://www.lsbin.com/#!" > 4< / a > < / li > < li class = "waves-effect" > < a href = "https://www.lsbin.com/#!" > 5< / a > < / li > < !-- Use icon inside list item for the right arrow --> < li class = "waves-effect" > < a href = "https://www.lsbin.com/#!" > < i class = "material-icons" > chevron_right < / i > < / a > < / li > < / ul > < / div > < / body > < / html >

【CSS实现分页详细实现代码】输出如下：