• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Разбивка описание на страницы с помощью CSS (Как создать разбивку описание на страницы на чистом CSS)
Разбивка описание на страницы с помощью CSS
Kosten
Дата: Четверг, 2021-03-25, 03:28 | Сообщение 1
Оффлайн
Администраторы
Сообщений:38130
Награды: 65


Если вы собираетесь использовать разбиение на страницы без начальной загрузки или JQuery, то это отличный пример разбивки на страницы с использованием только CSS. Это простая страница с содержимым для трех разных страниц с нижним колонтитулом. Элемент разбиения на страницы не используется, он работает только со стилями CSS с тремя переключателями вверху страницы, вместо традиционной разбивки на страницы, отображаемой в конце страницы.

После того, как вы нажмете кнопку с зависимой фиксацией, на экране отобразятся соответствующие данные. Это можно использовать только тогда, когда у вас есть определенный набор данных и страниц для отображения. Вы не можете иметь его динамически, как сетка или элемент .pagination в начальной загрузке. Код, используемый в CSS, отображает содержимое блока при нажатии переключателя.

Чистая разбивка на страницы CSS



HTML

Код
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pure CSS Pagination</title>
</head>
<body>
    <h1 class="title">The Lipsum Times</h1>
    <div class="container">
  <input class="one" type="radio" name="page" checked>
  <input class="two" type="radio" name="page">
  <input class="three" type="radio" name="page">

  <div class="content one"> Первое описание</div>
  <div class="content two"> Второе описание</div>
  <div class="content three"> Третье описание</div>
    </div>
    <div class="footer">
  <div class="copyright">© The Lipsum Times</div>
  <div class="contact">contact@lipsum.com</div>
    </div>
</body>
</html>

CSS

Код
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #161621;
    color: #ddd;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
}

body {
    width: calc(100% - 10em);
    padding-left: 5em;
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: normal;
}

/* title */

.title {
    margin: 0.5em 0;
    position: relative;
    text-align: center;
}

.title::after {
    content: "";
    width: 75%;
    height: 1px;
    background: #aaa;
    display: block;
    position: absolute;
    bottom: -0.5em;
    left: 12.5%;
}

/* content/pagination/what you're here for */

.container {
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

input {
    width: 1.5em;
    height: 1.5em;
    background: #aaa;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    transition: all 0.3s;
}

input:checked {
    width: 2.5em;
    height: 2.5em;
    background: #ddd;
}

.content {
    display: none;
    position: absolute;
    text-align: justify;
    top: 5em;
}

input.one:checked ~ .content.one,
input.two:checked ~ .content.two,
input.three:checked ~ .content.three {
    display: block;
}

/* footer */

.footer {
    width: calc(100% - 10em);
    height: 3em;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
}

.footer::before {
    content: "";
    width: 75%;
    height: 1px;
    background: #aaa;
    display: block;
    position: absolute;
    top: 0;
    left: 12.5%;
}

.footer .copyright {
    margin-left: 2em;
    flex: 1;
}

.footer .contact {
    margin-right: 2em;
}

На этом установочный процесс завершен.

Демонстрация
Прикрепления: 0346979.png(37.8 Kb) · css3-pagination.zip(6.2 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Разбивка описание на страницы с помощью CSS (Как создать разбивку описание на страницы на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: