Овај чланак ће демонстрирати метод за примену ефекта лебдења на мрежу редова у Таилвинд ЦСС-у.
Како применити Ховер на мрежу редова у Таилвинд-у?
Да бисте применили ефекат лебдења на мрежу редова у Таилвинд-у, направите ХТМЛ датотеку и користите „ лебдети ” разред са “ грид-ровс-<валуе> ” услужни програм у ХТМЛ програму. Он мења број редова када миш пређе преко мреже редова. Након тога, прегледајте веб ХТМЛ страницу и задржите показивач миша на ставкама мреже да бисте осигурали промене.
Погледајте наведене кораке за практичну примену:
Корак 1: Користите својство Ховер са мрежом редова у ХТМЛ програму
Направите ХТМЛ програм и користите „ лебдети “ имовина са “ грид-ровс-<валуе> ' корисност. На пример, користили смо „ ховер:грид-ровс-5 ” да бисте променили број редова при лебдењу:
< тело >
< див класа = 'грид грид-ровс-3 ховер: грид-ровс-5 грид-флов-цол гап-3 м-3 тект-центер' >
< див класа = 'бг-теал-500 п-5' > 1 < / див >
< див класа = 'бг-теал-500 п-5' > 2 < / див >
< див класа = 'бг-теал-500 п-5' > 3 < / див >
< див класа = 'бг-теал-500 п-5' > 4 < / див >
< див класа = 'бг-теал-500 п-5' > 5 < / див >
< див класа = 'бг-теал-500 п-5' > 6 < / див >
< див класа = 'бг-теал-500 п-5' > 7 < / див >
< див класа = 'бг-теал-500 п-5' > 8 < / див >
< див класа = 'бг-теал-500 п-5' > 9 < / див >
< див класа = 'бг-теал-500 п-5' > 10 < / див >
< / див >
< / тело >
Овде, у родитељском елементу <див>:
- “ грид ” класа се користи за креирање распореда мреже.
- “ грид-ровс-3 ” класа специфицира да мрежа треба да има 3 реда једнаке величине.
- “ ховер:грид-ровс-5 ” класа мења мрежу у 5 редова једнаке величине када миш пређе преко ње.
- “ грид-флов-цол ” класа поставља ставке мреже хоризонтално у колоне.
- “ гап-3 ” класа поставља размак од 3 јединице између сваке ставке мреже.
- “ м-3 ” класа примењује маргину од 3 јединице око мрежног контејнера.
- “ текстуални центар ” класа поставља текст сваке ставке мреже у центар.
У подређеним елементима <див>:
- “ <див> ” представља број ставки мреже.
- “ бг-теал-500 ” класа поставља плаву боју на позадину ставки мреже.
- “ п-5 ” класа додаје допуну од 5 јединица садржају унутар подређених <див> ставки.
Корак 2: Проверите излаз
Да бисте проверили да ли је ефекат лебдења примењен на мрежу редова, погледајте веб страницу и померите миш преко ставки мреже:
Може се приметити да у почетку постоје 3 реда и када миш пређе преко њих, број редова се променио на 5. Ово указује да је ефекат лебдења успешно примењен на мрежу редова.
Закључак
Да бисте применили ефекат лебдења на мрежу редова у Таилвинд-у, користите „ лебдети ” разред са “ грид-ровс-<валуе> ” услужни програм у ХТМЛ програму. Мења број редова при лебдењу. Да бисте обезбедили промене, погледајте веб ХТМЛ страницу и задржите показивач миша на ставкама мреже. Овај чланак је илустровао метод примене ефекта лебдења на мрежу редова у Таилвинд ЦСС-у.