To Lose Yourself

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » To Lose Yourself » Тестовый форум » Тестовое сообщение


Тестовое сообщение

Сообщений 1 страница 2 из 2

1

Благодарим за выбор нашего сервиса!

0

2

<!-- В пост. Ёжик. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr   

                 /* навигация слева и справа и поле */
                 "nav-left-1 tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
                 "nav-left-2 tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
                 "nav-left-3 tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
                 "nav-left-4 tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
                 
                 /* навигация низ */
                 "nav-bottom-start nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4 nav-bottom-end" 1fr
                   
                 /* Коллонки */
                 / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-top-start">
  <label for="nav-top-start" class="nav-top-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-top-1" checked>
  <label for="nav-top-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-top-2">
  <label for="nav-top-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-top-3">
  <label for="nav-top-3">Вкладка 3</label>
  <!-- четвертый -->
  <input type="radio" name="tabs-body" id="nav-top-4">
  <label for="nav-top-4">Вкладка 4</label>
  <!-- Нулевой с конца  -->
  <input type="radio" name="tabs-body" id="nav-top-end">
  <label for="nav-top-end" class="nav-top-end"></label>

  <!-- Навигация слева и справа -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label> 
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Вкладка 1</label>
 
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label>
  <!-- Справа 2 -->
  <input type="radio" name="tabs-body" id="nav-right-2">
  <label for="nav-right-2">Вкладка 2</label>
 
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Справа 3 -->
  <input type="radio" name="tabs-body" id="nav-right-3">
  <label for="nav-right-3">Вкладка 3</label>
 
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
  <!-- Справа 4 -->
  <input type="radio" name="tabs-body" id="nav-right-4">
  <label for="nav-right-4">Вкладка 4</label>
 
  <!-- Навигация низ -->
  <!-- Нулевой -->
  <input type="radio" name="tabs-body" id="nav-bottom-start">
  <label for="nav-bottom-start" class="nav-bottom-start"></label>
  <!-- Первый -->
  <input type="radio" name="tabs-body" id="nav-bottom-1">
  <label for="nav-bottom-1">Вкладка 1</label>
  <!-- Второй -->
  <input type="radio" name="tabs-body" id="nav-bottom-2">
  <label for="nav-bottom-2">Вкладка 2</label>
  <!-- Третий -->
  <input type="radio" name="tabs-body" id="nav-bottom-3">
  <label for="nav-bottom-3">Вкладка 3</label>
  <!-- четвертый -->
  <input type="radio" name="tabs-body" id="nav-bottom-4">
  <label for="nav-bottom-4">Вкладка 4</label>
  <!-- Нулевой с конца -->
  <input type="radio" name="tabs-body" id="nav-bottom-end">
  <label for="nav-bottom-end" class="nav-bottom-end"></label>

  <div class="tabs-body">
<!-- Контент вкладок сверху -->
<div class="body-top-1">
  <p>Текст вкладки верх 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-top-2">Текст вкладки верх 2</div>
    <div class="body-top-3">Текст вкладки верх 3</div>
    <div class="body-top-4">Текст вкладки верх 4</div>
   
<!-- Контент вкладок снизу -->
<div class="body-bottom-1">
  <p>Текст вкладки низ 1</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
    <div class="body-bottom-2">Текст вкладки низ 2</div>
    <div class="body-bottom-3">Текст вкладки низ 3</div>
    <div class="body-bottom-4">Текст вкладки низ 4</div>

<!-- Контент вкладок слева -->
    <div class="body-left-1">Текст вкладки слева 1</div>
    <div class="body-left-2">Текст вкладки слева 2</div>
    <div class="body-left-3">Текст вкладки слева 3</div>
    <div class="body-left-4">Текст вкладки слева 4</div>

<!-- Контент вкладок справа -->
    <div class="body-right-1">Текст вкладки справа 1</div>
    <div class="body-right-2">Текст вкладки справа 2</div>
    <div class="body-right-3">Текст вкладки справа 3</div>
    <div class="body-right-4">Текст вкладки справа 4</div>
  </div>
</div>

0


Вы здесь » To Lose Yourself » Тестовый форум » Тестовое сообщение