推荐阅读
  • CSS3 简介

    CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3 模块 CSS3被拆分为“模块”。旧规范已拆分成小块,还增加了新的。 一些最重要CSS3模块如下: 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 CSS3 建议 W3C的CSS3规范仍在开发。 但是,许多新的CSS3属性已在现代浏览器使用。..

  • CSS3 按钮

    .w3-ripple{ position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-tran

  • CSS3 圆角

    #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007;

  • CSS3 文本效果

    #textshadow { text-shadow: 5px 5px 5px #FF0000; font-size:30px; } #wordwrap { width:11em; border:1px solid #000000; word-wrap:break-word; } #normal { width:11em; border:1

  • CSS3 弹性盒子

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器

  • 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 Flex弹性布局

    解决前端一切布局的神器:CSS3 Flex弹性布局,Flex(Flexible Box),意为”弹性布局”。“弹性”,顾名思义,就是具有弹簧的特性,能够自由的伸缩(有点自适应的意思)。

  • CSS3 边框

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

  • CSS3 字体

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

  • CSS3 教程

    CSS3 教程 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 本教程向您讲解 CSS3 中的新特性。 开始学习 CSS3! CSS3 实例 [mycode3 type='css'] div { transform:rotate(30deg); } [/mycode3] 尝试一下 » 点击 '尝试一下' 按钮查看

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 © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图