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>Documenttitle>
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="#">1a>li>
li>a href="#">2a>li>
li>a href="#">3a>li>
li>a href="#">4a>li>
li>a href="#">5a>li>
li>a href="#">6a>li>
li>a href="#"&服务器托管网gt;7a>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>Documenttitle>
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: "/0a0";
}
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>
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
个人主页:聆风吟 系列专栏:算法模板、数据结构 少年有梦不应止于心动,更要付诸行动。 文章目录 前言 一. ⛳️模拟栈 1.1 用数组模拟实现栈 1.1.1 栈的定义 1.1.2 向栈顶插入一个数 x(进栈操作) 1.1.3 从栈顶弹出一个元素(出栈操作) 1…