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