推荐阅读
  • CSS3 2D 转换

    CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-righ

  • CSS3 边框

    CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image CSS3 圆角 在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在 CSS3 中,很容易创建圆角。 在 CSS3

  • CSS3 过渡

    .animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf

  • CSS3 多列

    CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: .newspaper { border:1px black solid; padding: 15px; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */

  • CSS3 框大小

    CSS3 框大小 [mystyle] #div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: content-box; } #div2 { width: 300px; height: 100px; padding: 50px; bord

  • CSS3 分页

    CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li

  • CSS3 字体

    CSS3 字体 CSS3 @font-face 规则 使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。 使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。 您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。 您“自己的”的字体是在 CSS3 @

  • CSS3 动画

    [mystyle] #animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:a

  • CSS3 3D 转换

    [mystyle] #rotate2D,#rotate3D { width: 80px; height: 70px; color: white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-righ

  • CSS3 多媒体查询实例

    CSS3 多媒体查询实例 本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下: 实例 1 <!DOCTYPE html><html><head><style>ul {  &nbs

CSS3 分页

本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。

简单分页

如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。

以下实例演示了如何使用 HTML 和 CSS 来创建分页:


CSS 实例

	ul.pagination {    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 实例

	ul.pagination li a.active {    background-color: 

	#4CAF50;    color: white;}ul.pagination li 

	a:hover:not(.active) {background-color: #ddd;}

CSS 实例

	ul.pagination li a.active {    background-color: 

	#4CAF50;    color: white;}ul.pagination li 

	a:hover:not(.active) {background-color: #ddd;}

圆角样式

可以使用 border-radius 属性为选中的页码来添加圆角样式:


CSS 实例

	ul.pagination li a {    border-radius: 5px;}ul.pagination li a.active {    

	border-radius: 5px;}

鼠标悬停过渡效果

我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:


CSS 实例

	ul.pagination li a {    transition: background-color .3s;}

带边框分页

我们可以使用 border 属性来添加带边框分页:


CSS 实例

	ul.pagination li a {    border: 1px solid #ddd; /* Gray 

	*/}

圆角边框

提示: 在第一个分页链接和最后一个分页链接添加圆角:


CSS 实例

	.pagination li:first-child a {    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 实例

	ul.pagination li a {    margin: 0 4px; /* 0 对应的是头部与底部,可以修改它看看效果 */}

分页字体大小

我们可以使用 font-size 属性来设置分页的字体大小:


CSS 实例

	ul.pagination li a {    font-size: 22px;}

居中分页

如果要让分页居中,可以在容器元素上 (如 <div>) 添加 text-align:center 样式:


CSS 实例

	div.center {    text-align: center;}

更多实例


CSS 实例

面包屑导航

另外一种导航为面包屑导航,实例如下:


CSS 实例

	ul.breadcrumb {    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";}
关于 免责声明 联系
Copyright © 2022 爱学习网 浙ICP备18049359号 网站地图 Google地图