Каков Ваш опыт в работе с компьютером? ¤i¤

Поделиться312021-07-03 23:08:53

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

[html]
<style>
.tabbed {
display: grid;
grid-template: /* навигация верх */
"nav-top-0 nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr

   /* навигация слева и поле */
"nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr

   /* Закоментировано */

   /* навигация слева и справа и поле
"nav-left-1 tabs-body tabs-body tabs-body nav-right-1" 1fr
   "nav-left-2 tabs-body tabs-body tabs-body nav-right-2" 1fr
   "nav-left-3 tabs-body tabs-body tabs-body nav-right-3" 1fr
   "nav-left-4 tabs-body tabs-body tabs-body nav-right-4" 1fr
   */

   /* навигация справа и поле
"tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
   */

/* Только поле (навигация сверху или снизу)
"tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
   "tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
   "tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
   "tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
   */

   /* навигация низ
   "nav-bottom-0 nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr
   */

   /* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tabbed">
<input type="radio" name="tabs-body" id="nav-top-0">
<label for="nav-top-0" class="nav-top-0"></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-left-1">
<label for="nav-left-1">Вкладка 1</label>
<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Вкладка 2</label>
<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Вкладка 3</label>
<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Вкадка 4</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-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>
</div>

[/html]

0

Поделиться322021-07-04 15:40:43

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

С 4 сторон, ёжик.

Код

Код:

<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
         
         /* Закоментировано */
         
         /* навигация слева и поле 
    	     "nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
         */                  
                           
         /* навигация справа и поле
    	     "tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
         */
         
             	 /* Только поле (навигация сверху или снизу)
    	     "tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
         "tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
         "tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
         "tabs-body tabs-body tabs-body tabs-body tabs-body" 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>

[html]<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

   /* Закоментировано */

   /* навигация слева и поле
"nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
   */

   /* навигация справа и поле
"tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr
   */

/* Только поле (навигация сверху или снизу)
"tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
   "tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
   "tabs-body tabs-body tabs-body tabs-body tabs-body" 1fr
   "tabs-body tabs-body tabs-body tabs-body tabs-body" 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>

<input type="radio" name="tabs-body" id="nav-left-1">
<label for="nav-left-1">Вкладка 1</label>

<input type="radio" name="tabs-body" id="nav-right-1">
<label for="nav-right-1">Вкладка 1</label>


<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Вкладка 2</label>

<input type="radio" name="tabs-body" id="nav-right-2">
<label for="nav-right-2">Вкладка 2</label>


<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Вкладка 3</label>

<input type="radio" name="tabs-body" id="nav-right-3">
<label for="nav-right-3">Вкладка 3</label>


<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Вкладка 4</label>

<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>[/html]

0

Поделиться332021-07-04 17:13:31

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

Только верх.

Код

Код:

<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr
         
                 /* Поле */	
    	         "tabs-body tabs-body tabs-body tabs-body" 300px             	          	
         
                 /* Коллонки */
    	         / 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <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>

  <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>
</div>

[html]
<style>
.tabbed {
display: grid;
grid-template: /* навигация верх */
"nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr

/* Поле */
"tabs-body tabs-body tabs-body tabs-body" 300px

/* Коллонки */
/ 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tabbed">

<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>

<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>
</div>
[/html]

0

Поделиться342021-07-04 17:30:14

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

Верх и слева.

Код

Код:

<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr                                    
         
          /* навигация слева и поле */
    	     "nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 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>
  
  <!-- Навигация слева -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1">
  <label for="nav-left-1">Вкладка 1</label>  
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label> 
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>   
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</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-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>
</div>

[html]<style>
.tabbed {
display: grid;
grid-template: /* навигация верх */
"nav-top-start nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr

   /* навигация слева и поле */
"nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 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-left-1">
<label for="nav-left-1">Вкладка 1</label>

<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Вкладка 2</label>

<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Вкладка 3</label>

<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Вкладка 4</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-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>
</div>[/html]

0

Поделиться352021-07-04 17:42:19

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

Верх и справа.

Код

Код:

<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr                                    
         
          /* навигация справа и поле */
    	     "tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
         "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr    	 
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->
  <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-bottom-end">
  <label for="nav-bottom-end" class="nav-bottom-end"></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-right-2">
  <label for="nav-right-2">Вкладка 2</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-right-4">
  <label for="nav-right-4">Вкладка 4</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-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>

[html]
<style>
.tabbed {
display: grid;
grid-template: /* навигация верх */
"nav-top-1 nav-top-2 nav-top-3 nav-top-4 nav-top-end" 1fr

   /* навигация справа и поле */
"tabs-body tabs-body tabs-body tabs-body nav-right-1" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-2" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-3" 1fr
   "tabs-body tabs-body tabs-body tabs-body nav-right-4" 1fr

   /* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tabbed">

<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-bottom-end">
<label for="nav-bottom-end" class="nav-bottom-end"></label>



<input type="radio" name="tabs-body" id="nav-right-1">
<label for="nav-right-1">Вкладка 1</label>

<input type="radio" name="tabs-body" id="nav-right-2">
<label for="nav-right-2">Вкладка 2</label>

<input type="radio" name="tabs-body" id="nav-right-3">
<label for="nav-right-3">Вкладка 3</label>

<input type="radio" name="tabs-body" id="nav-right-4">
<label for="nav-right-4">Вкладка 4</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-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>
[/html]

0

Поделиться362021-07-04 17:50:08

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

Сверху, слева и справа.

Код

Код:

<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     
         
         /* Коллонки */
    	     / 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-bottom-end">
  <label for="nav-bottom-end" class="nav-bottom-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>
  

  <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-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>

[html]
<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

   /* Коллонки */
/ 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-bottom-end">
<label for="nav-bottom-end" class="nav-bottom-end"></label>




<input type="radio" name="tabs-body" id="nav-left-1">
<label for="nav-left-1">Вкладка 1</label>

<input type="radio" name="tabs-body" id="nav-right-1">
<label for="nav-right-1">Вкладка 1</label>


<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Вкладка 2</label>

<input type="radio" name="tabs-body" id="nav-right-2">
<label for="nav-right-2">Вкладка 2</label>


<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Вкладка 3</label>

<input type="radio" name="tabs-body" id="nav-right-3">
<label for="nav-right-3">Вкладка 3</label>


<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Вкладка 4</label>

<input type="radio" name="tabs-body" id="nav-right-4">
<label for="nav-right-4">Вкладка 4</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-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>
[/html]

0

Поделиться372021-07-04 17:54:47

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

Верх и низ.

Код

Код:

<style>
.tabbed {
  display: grid;
  grid-template: /* навигация верх */
                 "nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr                                    
         
         /* Только поле (навигация сверху или снизу) */
    	     "tabs-body tabs-body tabs-body tabs-body" 300px              
         
         /* навигация низ */
         "nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">
  <!-- Навигация верх -->  
  <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-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>
  

  <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>
</div>

[html]
<style>
.tabbed {
display: grid;
grid-template: /* навигация верх */
"nav-top-1 nav-top-2 nav-top-3 nav-top-4" 1fr

   /* Только поле (навигация сверху или снизу) */
"tabs-body tabs-body tabs-body tabs-body" 300px

   /* навигация низ */
   "nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr

   /* Коллонки */
/ 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tabbed">

<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-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>

<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>
</div>
[/html]

0

Поделиться382021-07-04 17:57:44

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

Только низ

Код

Код:

<style>
.tabbed {
  display: grid;
  grid-template: /* Только поле */
    	     "tabs-body tabs-body tabs-body tabs-body" 300px              
         
         /* навигация низ */
         "nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">  
  <!-- Навигация низ -->
  <input type="radio" name="tabs-body" id="nav-bottom-1" checked>
  <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>
  

  <div class="tabs-body">
	<!-- Контент вкладок снизу -->
	<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>
</div>

[html]<style>
.tabbed {
display: grid;
grid-template: /* Только поле */
"tabs-body tabs-body tabs-body tabs-body" 300px

   /* навигация низ */
   "nav-bottom-1 nav-bottom-2 nav-bottom-3 nav-bottom-4" 1fr

   /* Коллонки */
/ 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tabbed">

<input type="radio" name="tabs-body" id="nav-bottom-1" checked>
<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>

<div class="tabs-body">

<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>
</div>[/html]

0

Поделиться392021-07-04 18:25:20

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

Справа и слева.

Код

Код:

<style>
.tabbed {
  display: grid;
  grid-template: /* навигация слева и справа и поле */
    	     "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
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">  
  <!-- Навигация слева и справа -->
  
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1" checked>
  <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>
  

  <div class="tabs-body">
	<!-- Контент вкладок слева -->
    <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>

[html]
<style>
.tabbed {
display: grid;
grid-template: /* навигация слева и справа и поле */
"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

   /* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tabbed">



<input type="radio" name="tabs-body" id="nav-left-1" checked>
<label for="nav-left-1">Вкладка 1</label>

<input type="radio" name="tabs-body" id="nav-right-1">
<label for="nav-right-1">Вкладка 1</label>


<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Вкладка 2</label>

<input type="radio" name="tabs-body" id="nav-right-2">
<label for="nav-right-2">Вкладка 2</label>


<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Вкладка 3</label>

<input type="radio" name="tabs-body" id="nav-right-3">
<label for="nav-right-3">Вкладка 3</label>


<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Вкладка 4</label>

<input type="radio" name="tabs-body" id="nav-right-4">
<label for="nav-right-4">Вкладка 4</label>

<div class="tabs-body">

<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>
[/html]

0

Поделиться402021-07-04 18:30:37

Автор: kolobdur
Последний визит:
2023-12-25 16:33:17
<img src="/files/0014/74/cb/85243.png">
Зарегистрирован: 2010-08-25
Откуда: Севастополь
Приглашений: 0
Сообщений: 1417
Уважение: +21
Пол: Мужской
Конфигурация ПК: <div>CPU-AMD Athlon II X2 245
Cooler-AMD
MB-Biostar GF 8100 M2G+
GPU-встроенная
RAM-GoodRAM DDR2 2 Gb Х2
HDD-WDC WD800JB-00JJC0(80, IDE)+Hitachi HDS721680PLA380 (SATA II,80 Gb)
CD/DVD-LG
Sound-встроенная
Платы расширения
Корпус,БП-БП FSP 400 W
Монитор-Samsung SyncMaster 757NF
Мышь и клавиатура-A4Tech OP-620D/A4Tech X7 G700
Акустика-Dino Jet 2140+SVEN MS-230
Принтер/сканер-
Прочее-
Интернет-соединение- 3G Nokia 6290</div>
Провел на форуме:
1 месяц 28 дней
Музыка: 1,3,4
Настройка: 42 Цифровое Железо

Только слева.

Код

Код:

<style>
.tabbed {
  display: grid;
  grid-template: /* навигация слева и поле */
    	     "nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
         "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
         
         /* Коллонки */
    	     / 1fr 1fr 1fr 1fr 1fr;
  width: 100%;         
}
</style>

<div class="tabbed">  
  <!-- Навигация слева --> 
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1" checked>
  <label for="nav-left-1">Вкладка 1</label>  
  <!-- Слева 2 -->
  <input type="radio" name="tabs-body" id="nav-left-2">
  <label for="nav-left-2">Вкладка 2</label> 
  <!-- Слева 3 -->
  <input type="radio" name="tabs-body" id="nav-left-3">
  <label for="nav-left-3">Вкладка 3</label>
  <!-- Слева 4 -->
  <input type="radio" name="tabs-body" id="nav-left-4">
  <label for="nav-left-4">Вкладка 4</label>
   
  <div class="tabs-body">
	<!-- Контент вкладок слева -->
    <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>
</div>

[html]
<style>
.tabbed {
display: grid;
grid-template: /* навигация слева и поле */
"nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
   "nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr

   /* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tabbed">


<input type="radio" name="tabs-body" id="nav-left-1" checked>
<label for="nav-left-1">Вкладка 1</label>

<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Вкладка 2</label>

<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Вкладка 3</label>

<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Вкладка 4</label>

<div class="tabs-body">

<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>
</div>
[/html]

0

Что-то 1.1	Что-то 2.1	Что-то 3.1
Что-то 1.2	Что-то 2.2	Что-то 3.2
Что-то 1.3	Что-то 2.3	Что-то 3.3

Каков Ваш "компьютерный стаж"?
Считанные месяцы...		0% - 0
Около года.		0% - 0
Около двух лет.		0% - 0
Около трёх лет.		12% - 1
Около пяти лет.		12% - 1
Около восьми лет.		37% - 3
Более 10 лет!		37% - 3
Голосов: 8

Цифровое Железо

Меню навигации

Пользовательские ссылки

Объявление

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

Каков Ваш опыт в работе с компьютером? ¤i¤

Сообщений 31 страница 40 из 47

Опрос

Поделиться312021-07-03 23:08:53

Поделиться322021-07-04 15:40:43

Поделиться332021-07-04 17:13:31

Поделиться342021-07-04 17:30:14

Поделиться352021-07-04 17:42:19

Поделиться362021-07-04 17:50:08

Поделиться372021-07-04 17:54:47

Поделиться382021-07-04 17:57:44

Поделиться392021-07-04 18:25:20

Поделиться402021-07-04 18:30:37

Похожие темы