关注爱学习公众号
扫码手机阅读更方便
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,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image CSS3 圆角 在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在 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 可以将文本内容设计成像报纸一样的多列布局,如下实例: .newspaper { border:1px black solid; padding: 15px; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */
CSS3 框大小 [mystyle] #div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: content-box; } #div2 { width: 300px; height: 100px; padding: 50px; bord
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 @font-face 规则 使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。 使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。 您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。 您“自己的”的字体是在 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
[mystyle] #rotate2D,#rotate3D { width: 80px; height: 70px; color: white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-righ
CSS3 多媒体查询实例 本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下: 实例 1 <!DOCTYPE html><html><head><style>ul {  &nbs
本章节我们将为大家介绍如何通过使用 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";}