CSS3多列分页属性

news/2024/11/30 11:42:52/

CSS3多列

Firefox浏览器支持该属性的形式是-moz-column-count，而基于Webkit的浏览器，例如Safari和Chrome，支持该属性的形式是-webkit-column-count

column-count：该属性定义多列文本流中的栏数
语法：column-count:integer | auto
integer是一个表示文本分为多少栏的正值
column-gap：该属性定义了多列文本流中，列与列之间的距离
语法：column-gap:length | normal
length可以是CSS度量的任意正值
colums：该属性用于为多列文本流定义列数和列度
语法：colums:column-count width
column-rule-style：该属性定义多列文本流中列与列之间分割线的样式（初始值为none）
语法：column-rule-style:dashed | dotted | double | groove | hidden | inset | inherit | none | outset | ridge | solid
column-rule-width：该属性定义多列文本流中列与列之间分割线的宽度（默认值为medium）
语法：column-rule-width:non-negative length | medium | thick | thin | inherit
column-rule-color：该属性定义多列文本流中列与列之间分割线的颜色
语法：column-rule-color:color
color是任何有效的CSS颜色值
column-rule：该缩写属性定义了多列文本流中列与列之间分割线的样式、宽度和颜色。
语法：column-rule:rule-width rule-style color
column-width：该属性定义多列文本流中的列宽
语法：column-width:length | auto

CSS3分页

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul.pagination {display: inline-block;}ul.pagination li {display: inline;}ul.pagination li a {color: black;/*字体颜色设置为黑色*/float: left;padding: 8px 16px;/*增加内边距*/text-decoration: none;/*取消超链接下划线*/border: 1px solid #dddddd;/*设置边框*/}ul.pagination li a:hover {color: #ccc;background-color: #eeeeee;border-color: #ddd;}</style></head><body><div class="center"><ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li></ul></div>
</body></html>

面包屑导航（Breadcrumb Navigation）是一种用于显示用户当前页面在网站层次结构中位置的导航方式，通常以路径的形式呈现，类似于路径中的文件夹层级。
面包屑导航示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>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";}ul.breadcrumb li a {color: green;}</style></head><body><div class="navi"><ul class="breadcrumb"><li><a href="#">首页 </a></li><li><a href="#">前端 </a></li><li><a href="#">HTML 教程 </a></li><li>HTML 段落</li></ul></div>
</body></html>