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