-
关注爱学习公众号
-
扫码手机阅读更方便
-
CSS3 渐变
CSS3 渐变（Gradients） 渐变效果 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gra
-
CSS3 多列
CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: .newspaper { border:1px black solid; padding: 15px; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */
-
CSS3 弹性盒子
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器
-
CSS3 字体
CSS3 字体 CSS3 @font-face 规则 使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。 使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。 您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。 您“自己的”的字体是在 CSS3 @
-
CSS3 简介
CSS3 简介 CSS3 已完全向后兼容，所以你就不必改变现有的设计。 CSS3 模块 CSS3 被拆分为“模块”。旧规范已拆分成小块，还增加了新的。 一些最重要 CSS3 模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 CSS3 建议 W3C 的 CSS3 规范仍在开发。 但是，现在新的浏览器已经都支持 CSS3 属性。..
-
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 圆角
#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007;
-
CSS3 教程
CSS3 教程 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 本教程向您讲解 CSS3 中的新特性。 开始学习 CSS3! CSS3 实例 [mycode3 type='css'] div { transform:rotate(30deg); } [/mycode3] 尝试一下 » 点击 '尝试一下' 按钮查看
-
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 分页
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 分页
本章节我们将为大家介绍如何通过使用 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";}