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

Объявление

загрузить
Текст 1
Текст 2
Текст 3
Текст 4
Текст 5
Текст 6
здесь текста много
Что-то 1.1 Что-то 2.1 Что-то 3.1
Что-то 1.2 Что-то 2.2 Что-то 3.2
Что-то 1.3 Что-то 2.3 Что-то 3.3

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

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


Вы здесь » Цифровое Железо » Персональные компьютеры » Каков Ваш опыт в работе с компьютером? ¤i¤


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

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

Опрос

Каков Ваш "компьютерный стаж"?
Считанные месяцы...

0% - 0
Около года.

0% - 0
Около двух лет.

0% - 0
Около трёх лет.

12% - 1
Около пяти лет.

12% - 1
Около восьми лет.

37% - 3
Более 10 лет!

37% - 3
Голосов: 8

41

Только справа.

Код
Код:
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация справа и поле */
    	     "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">  
  <!-- Навигация справа --> 
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1" checked>
  <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-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: /* навигация справа и поле */
         "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"> 
  <!-- Навигация справа -->
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1" checked>
  <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-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

42

[html]<style>
.table {
  display: grid;
  grid-template: repeat(4, 25vw)/repeat(4, 25vw);
}
.table div {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid red;
}
</style>

<div class="table">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>[/html]

0

43

[html]<style>
.table {
  display: grid;
  grid-template: "quadro-1 quadro-2 quadro-3 quadro-4" 25vw
                 "quadro-5 quadro-6 quadro-7 quadro-8" 25vw
         "quadro-9 quadro-10 quadro-11 quadro-12" 25vw
         / 25vw 25vw 25vw 25vw;
}
.table div {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid red;
}

#quadro-1 {grid-area: quadro-1;}
#quadro-2 {grid-area: quadro-2;}
#quadro-3 {grid-area: quadro-3;}
#quadro-4 {grid-area: quadro-4;}
#quadro-5 {grid-area: quadro-5;}
#quadro-6 {grid-area: quadro-6;}
#quadro-7 {grid-area: quadro-7;}
#quadro-8 {grid-area: quadro-8;}
#quadro-9 {grid-area: quadro-9;}
#quadro-10 {grid-area: quadro-10;}
#quadro-11 {grid-area: quadro-11;}
#quadro-12 {grid-area: quadro-12;}
</style>

<div class="table">
  <div id="quadro-1">1</div>
  <div id="quadro-2">2</div>
  <div id="quadro-3">3</div>
  <div id="quadro-4">4</div>
  <div id="quadro-5">5</div>
  <div id="quadro-6">6</div>
  <div id="quadro-7">7</div>
  <div id="quadro-8">8</div>
  <div id="quadro-9">9</div>
  <div id="quadro-10">10</div>
  <div id="quadro-11">11</div>
  <div id="quadro-12">12</div>
</div>[/html]

0

44

[html]<style>
.grid-img {display: grid;width: min-content;}
.grid-img img, .grid-img div {grid-area: 1 / 1;transition: all 1.7s linear;}
.grid-img div {color: #000000;text-align: center;opacity: 0;}
.grid-img:hover div {
  color: #000000;
  text-shadow:
    -0.2px -0.2px 0 #000000,
    0.2px -0.2px 0 #000000,
    -0.2px 0.2px 0 #000000,
    0.2px 0.2px 0 #000000;
  letter-spacing: 0.9px;
opacity: 1;
}
.grid-img:hover img {opacity: 0.4;}
</style>
<div class="grid-img">
   <div>здесь текста много</div>
<img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
</div>[/html]

0

45

[html]<style type="text/css">
#info-randomly {
  position: relative;
  overflow: hidden;
  height: auto;
  width: auto;
}
#info-randomly div {
  display: none;
  animation: 3s slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</style>

<div id="info-randomly">
<div>
Текст 1
</div>
<div>
Текст 2
</div>
<div>
Текст 3
</div>
<div>
Текст 4
</div>
<div>
Текст 5
</div>
<div>
Текст 6
</div>
</div>

<script>
$(function() {
  var n = 1, divs = $('#info-randomly div').get();
  for ( ; n--; )  {
  $(divs.splice(Math.random()*divs.length|0,1)).prependTo('#info-randomly').show();
  }
});
</script>[/html]

0

46

[html]<style type="text/css">
#info-randomly {
  position: relative;
  overflow: hidden;
  height: auto;
  width: auto;
}
#info-randomly div {
  display: none;
  animation: 3s slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</style>

<div id="info-randomly">
<div>
"Пожалуй, Глориэн Беттерайз — лучшее, что могло случиться с некогда крохотной захиревшей забегаловкой на одной из северных площадей столицы. По крайней мере, так считала она сама и дюжина единиц живой силы, трудящейся в заведении. [<a href='http://anselior.1bb.ru/viewtopic.php?id=78#p1676'>читать далее</a>]",
</div>
<div>
"Некоторых людей удержать на одном месте очень трудно, других попросту невозможно. Где-то на задворках сознания Реэль помнила, как клятвенно обещала держаться в двух-трех сутках езды от поместья своего Лорда, где-то там же собиралась действительно сдержать обещание. [<a href='http://anselior.1bb.ru/viewtopic.php?id=77#p1756'>читать далее</a>]",
</div>
<div>
"Да, Ариес вспомнил, как погоня за одним из культистов заставила его поплыть в Альварос. Судя по сообщениям людей, этот культист был одним из наиболее могущественных, такого Эль’Териан не мог упустить и с великим удовольствием ждал подходящего момента, когда мог бы сокрушить ещё одного из своих заклятых врагов. [<a href='http://anselior.1bb.ru/viewtopic.php?id=54#p1168'>читать далее</a>]",
</div>
<div>
"«Черный призрак» растворялся во мраке и тумане, и разглядеть можно было разве что его величественный силуэт, а будь сейчас подняты паруса, они бы тоже слились с темным беззвездным небом. В такие моменты можно было только в очередной раз убедиться, что корабль полностью оправдывает свое имя. [<a href='http://anselior.1bb.ru/viewtopic.php?id=62#p1678'>читать далее</a>]");
</div>
</div>

<script>
$(function() {
  var n = 1, divs = $('#info-randomly div').get();
  for ( ; n--; )  {
  $(divs.splice(Math.random()*divs.length|0,1)).prependTo('#info-randomly').show();
  }
});
</script>[/html]

0

47

[html]<style>
.grid-img {display: grid;width: min-content;}
.grid-img img {grid-area: 1 / 1;transition: all 1.7s linear;width: 150px; height: 150px; object-fit: cover;}
.grid-img img:nth-child(1) {opacity: 1;}
.grid-img img:nth-child(2) {opacity: 0;}
.grid-img:hover img:nth-child(1) {opacity: 0;}
.grid-img:hover img:nth-child(2) {opacity: 1;}
</style>
<div class="grid-img">
  <img src="https://forumavatars.ru/img/avatars/0000/14/1c/22787-1583487089.png" alt="">
  <img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
</div>[/html]

0


Вы здесь » Цифровое Железо » Персональные компьютеры » Каков Ваш опыт в работе с компьютером? ¤i¤


Создать форум © iboard.ws Видеочат kdovolalmi.cz