Вместо того, чтобы повторять одно и то же снова и снова, могу ли я использовать цикл в своем коде здесь? HTML и CSS

ProgramBox

Вместо того, чтобы повторять одно и то же снова и снова, могу ли я использовать цикл в своем коде здесь? HTML и CSS

Post author:admin
Запись опубликована:11 февраля, 2023
Post category:Вопросы по программированию

#html #css #image #loops #repeat

#HTML #css #изображение #циклы #повторить

Вопрос:

У меня всего 25 изображений.

Могу ли я как-то использовать цикл, чтобы упростить себе задачу. Я не хочу повторять один и тот же код снова и снова, как я сделал ниже.

 span.boxer1 {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 300px;
  left: 0;
  position: absolute;
  top: 0;
  width: 275px;
  opacity: 0;
}

span.boxer1 span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul.boxers li:hover span.boxer1 {
  opacity: 1;
}
span.boxer2 {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 300px;
  left: 0;
  position: absolute;
  top: 0;
  width: 275px;
  opacity: 0;
}

span.boxer2 span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul.boxers li:hover span.boxer2 {
  opacity: 1;
}

span.boxer3 {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 300px;
  left: 0;
  position: absolute;
  top: 0;
  width: 275px;
  opacity: 0;
}

span.boxer3 span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul.boxers li:hover span.boxer3 {
  opacity: 1;
}

span.boxer4 {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 300px;
  left: 0;
  position: absolute;
  top: 0;
  width: 275px;
  opacity: 0;
}

span.boxer4 span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul.boxers li:hover span.boxer4 {
  opacity: 1;
}

1. Использовать один и тот же класс для всех диапазонов???? или использовать другой селектор, например ul.boxers li > span ???

2. Разве вы не можете просто использовать общий класс для .boxer1 , .boxer2 , .boxer3 ? Идея классов заключается в том, что они могут использоваться повторно.

3. Абсолютное позиционирование — очень плохой метод размещения веб-страниц. Он чрезвычайно негибкий, и есть гораздо лучшие и более отзывчивые варианты. Проверьте LearnLayout.com

Ответ №1:

Вы знаете, что можете использовать несколько стилей в одном элементе?

 <div id="myid1needforsomethingelse" class="liketable300 topalign myfont14">
 <span class="mypadding2 mymargin3 myheadersbig"> content </span>
</div>
<div id="myid2needforsomethingelse" class="liketable300 topalign myfont12">
 <span class="mypadding2 mymargin3 mycontentmedium"> content </span>
</div>

Так что просто разделите свой css, который повторяется в классах, и просто используйте в repeat, я мог бы быть проще, чем писать стиль для каждого и любого div / span и under-div и under-span там: D

Ответ №2:

«Класс» можно использовать для нескольких элементов, чтобы применять одни и те же правила CSS к каждому элементу.

‘ID’ — это уникальный идентификатор, который должен использоваться только для одного элемента.

В вашем случае вы хотите добавить класс к каждому из ваших элементов и установить свои правила CSS для этого класса, чтобы они применялись к каждому элементу, например

 .myclass {
    background: #000;
}

<div class="myclass"></div>

<div class="myclass"></div>

<div class="myclass"></div>

<div class="myclass"></div>

В приведенном выше примере правило, установленное в CSS для .myclass, будет применено ко всем четырем элементам.

Ответ №3:

Во-первых, насколько я могу судить, в этих классах нет разницы, поэтому вы можете просто использовать общий класс для всех них и задать стиль один раз.

Тем не менее, если вы используете какой-то скрипт для создания изображений, предположительно, они также находятся в какой-то форме другого контейнера, и в этом случае вы можете использовать n-е дочернее обозначение в CSS, если вам нужно различать.

 div.boxercontainer:nth-child(1) {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Ответ №4:

Вы можете написать общие правила css для некоторого селектора с запятой, например :

 span.boxer1, span.boxer2 {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 300px;
  left: 0;
  position: absolute;
  top: 0;
  width: 275px;
  opacity: 0;
}

span.boxer1 span, span.boxer2 span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul.boxers li:hover span.boxer1, ul.boxers li:hover span.boxer2 {
  opacity: 1;
}

В случае, если вам нужно установить другой css, например, для span.boxer1, вы можете написать это :

 span.boxer1 { width : 300px;} // in this case the latest css-rule will be applied to element, so width:300 will override width:250 which are upper in css file

Это должно переопределить существующий общий css https://jsfiddle.net/q83ojcbq /

Или, как @Bri.H. уже ответил, вы можете использовать одни и те же правила (css-классы) для разных элементов