-
关注爱学习公众号
-
扫码手机阅读更方便
-
CSS3 圆角
#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007;
-
CSS3 渐变
CSS3 渐变（Gradients） 渐变效果 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gra
-
CSS3 边框
CSS3 边框 CSS3 边框 用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。 在本章中，您将了解以下的边框属性： border-radius box-shadow border-image CSS3 圆角 在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在 CSS3 中，很容易创建圆角。 在 CSS3
-
CSS3 简介
CSS3 简介 CSS3 已完全向后兼容，所以你就不必改变现有的设计。 CSS3 模块 CSS3 被拆分为“模块”。旧规范已拆分成小块，还增加了新的。 一些最重要 CSS3 模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 CSS3 建议 W3C 的 CSS3 规范仍在开发。 但是，现在新的浏览器已经都支持 CSS3 属性。..
-
CSS3 弹性盒子
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器
-
CSS3 教程
CSS3 教程 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 本教程向您讲解 CSS3 中的新特性。 开始学习 CSS3! CSS3 实例 [mycode3 type='css'] div { transform:rotate(30deg); } [/mycode3] 尝试一下 » 点击 '尝试一下' 按钮查看
-
CSS3 多媒体查询实例
CSS3 多媒体查询实例 本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下： 实例 1 <!DOCTYPE html><html><head><style>ul {  &nbs
-
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 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img {    border-radius: 8px;} 尝试一下 » 实例 椭圆形图片: img {    border-radius: 50%;} 尝试一下 » 缩
-
CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。 例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置
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";}