CSS3多列&分页属性

CSS3多列

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

  1. column-count:该属性定义多列文本流中的栏数

    语法:column-count:integer | auto

    integer是一个表示文本分为多少栏的正值

  2. column-gap:该属性定义了多列文本流中,列与列之间的距离

    语法:column-gap:length | normal

    length可以是CSS度量的任意正值

  3. colums:该属性用于为多列文本流定义列数和列度

    语法:colums:column-count width

  4. column-rule-style:该属性定义多列文本流中列与列之间分割线的样式(初始值为none)

    语法:column-rule-style:dashed | dotted | double | groove | hidden | inset | inherit | none | outset | ridge | solid

  5. column-rule-width:该属性定义多列文本流中列与列之间分割线的宽度(默认值为medium)

    语法:column-rule-width:non-negative length | medium | thick | thin | inherit

  6. column-rule-color:该属性定义多列文本流中列与列之间分割线的颜色

    语法:column-rule-color:color

    color是任何有效的CSS颜色值

  7. column-rule:该缩写属性定义了多列文本流中列与列之间分割线的样式、宽度和颜色。

    语法:column-rule:rule-width rule-style color

  8. column-width:该属性定义多列文本流中的列宽

    语法:column-width:length | auto

CSS3分页

示例:

html 复制代码
<!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)是一种用于显示用户当前页面在网站层次结构中位置的导航方式,通常以路径的形式呈现,类似于路径中的文件夹层级。

面包屑导航示例:

html 复制代码
<!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>
相关推荐
神仙别闹3 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器9 分钟前
指定阿里镜像原理
前端
枷锁—sha14 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha15 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜31 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法