CSS 分页实例
本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。
简单分页
如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。
以下实例演示了如何使用 HTML 和 CSS 来创建分页：
CSS 实例
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
点击及鼠标悬停分页样式
如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover
选择器来修改样式：
CSS 实例
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
CSS 实例
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
圆角样式
可以使用 border-radius 属性为选中的页码来添加圆角样式:
CSS 实例
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
鼠标悬停过渡效果
我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:
CSS 实例
transition: background-color .3s;
}
带边框分页
我们可以使用 border 属性来添加带边框分页:
CSS 实例
border: 1px solid #ddd; /* Gray */
}
圆角边框
提示: 在第一个分页链接和最后一个分页链接添加圆角：
CSS 实例
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
分页间隔
提示: 你可以使用 margin 属性来为每个页码直接添加空格：
CSS 实例
margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}
分页字体大小
我们可以使用 font-size 属性来设置分页的字体大小:
CSS 实例
font-size: 22px;
}
居中分页
如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：
CSS 实例
text-align: center;
}
面包屑导航
另外一种导航为面包屑导航，实例如下：
CSS 实例
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
点击查看所有 CSS3 教程 文章: https://www.codercto.com/courses/l/24.html
Domain-Driven Design
Eric Evans / Addison-Wesley Professional / 2003-8-30 / USD 74.99
"Eric Evans has written a fantastic book on how you can make the design of your software match your mental model of the problem domain you are addressing. "His book is very compatible with XP. It is n......一起来看看 《Domain-Driven Design》 这本书的介绍吧!
