oštevilčenje strani spletnega mesta, pagination

Oštevilčenje strani spletnega mesta

Oštevilčenje strani (ang. Pagination) je tehnika razdeljevanja vsebin na manjše, obvladljive dele ali strani, ki uporabnikom omogoča lažje brskanje in iskanje informacij na spletnih straneh ali znotraj aplikacij. Uporablja se predvsem na spletnih mestih z veliko količino podatkov, kot so blogi, spletne trgovine, forumi in iskalniki.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>oštevilčenje strani spletnega mesta, pagination</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

.container {
            display: block;
            width: 100%;
            height: 100%;
            padding: 10px 30px;
        }

.container h1 {
            text-align: center;
        }

.row {
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%);
            border: 8px double orange;
            border-radius: 24px;
        }

.row a {
            width: 150px;
            text-decoration: none;
            color: black;
            padding: 10px;
            border: 1px solid lightgray;
            text-align: center;
        }

.row a:first-child {
            width: 50px;
            border-top-left-radius: 24px;
            border-bottom-left-radius: 24px;
        }

.row a:first-child:focus {
            background-color: transparent;
        }

.row a:first-child:active {
            background-color: lightblue;
        }

.row a:last-child {
            width: 50px;
            border-top-right-radius: 24px;
            border-bottom-right-radius: 24px;
        }

.row a:last-child:focus {
            background-color: transparent;
        }

.row a:last-child:active {
            background-color: lightblue;
        }

.row a:hover {
            background-color: lightgrey;
            border: 1px solid transparent;
            box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
        }

.row a:focus {
            background-color: lightblue;
        }

@media screen and (max-width: 920px) {
            .row {
                left: 20px;
                right: 20px;
                transform: none;
            }
        }

@media screen and (max-width: 680px) {
            .row {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding: 5px;
                border: 4px solid orange;
                border-radius: 12px;
            }

.row a {
                width: 100px;
                font-size: 14px;
                padding: 8px;
                margin: 2px;
            }

.row a:first-child, .row a:last-child {
                width: 60px;
                border-radius: 50%;
            }

.container {
                padding: 10px;
            }
        }

</style>
</head>
<body>
<div class="container">
    <h1>Dobrodošli v CSS vadnico</h1>