loader

Создание макета сайта Вторая часть

Կայքի դասավորության ստեղծում Երկրորդ մաս

Приступим к созданию второго блока. Давайте сперва посмотрим как же будет выглядеть код нашего второго блока:

Սկսենք ստեղծել երկրորդ բլոկը: Եկեք նախ տեսնենք, թե ինչպես կլինի մեր երկրորդ բլոկի կոդը.

Теперь должно быть не так уже и страшно. Если посмотреть на макет вы увидите что у нас есть две фотографии, тексты и кнопка. Что же начнём? Сперва зададим этому блоку 100%-ную длину (width: 100%). Это делается для того, чтобы не зависимо от размеров экрана длина всегда была на весь экран. Потом зададим ширину которая будет вычитываться автоматически. Это делается для того чтобы новые добавленные элементы не выходили из границ этого блока. После этого мы задали фоновый цвет блоку background-color и прописали свойство display со значением flex, что придаёт блоку гибкость. Остальные свойства мы можем применить к блоку лишь после применения display: flex; которые позволяют управлять элементами, находятся в flex-блоке. Каждый из этих свойств отвечает за горизонтальное или вертикальное положение элемента. Например, свойство align-items управляет местоположением элемента по вертикали, а justify-content по горизонтали.

Հիմա դա չպետք է այդքան սարսափելի լինի։ Եթե ​​նայեք դասավորությանը, կտեսնեք, որ մենք ունենք երկու լուսանկար, տեքստեր և կոճակ: Ինչի՞ց սկսենք։ Նախ, եկեք այս բլոկին տանք 100% երկարություն (width: 100%): Դա արվում է այնպես, որ անկախ էկրանի չափսից, երկարությունը միշտ լինի ամբողջ էկրանով: Այնուհետև մենք սահմանում ենք այն լայնությունը, որն ինքնաբերաբար կհանվի: Դա արվում է, որպեսզի նոր ավելացված տարրերը դուրս չգան այս բլոկի սահմաններից: Դրանից հետո մենք ֆոնի գույնը դնում ենք background-color բլոկի վրա, իսկ display հատկությունը դնում ենք flex, ինչը դարձնում է բլոկը ճկուն։ Մնացած հատկությունները կարող ենք կիրառել բլոկի վրա միայն display: flex; որոնք թույլ են տալիս կառավարել տարրերը, որոնք գտնվում են flex-բլոկում: Այս հատկություններից յուրաքանչյուրը պատասխանատու է տարրի հորիզոնական կամ ուղղահայաց դիրքի համար: Օրինակ, align-items հատկությունը վերահսկում է տարրի ուղղահայաց դիրքը, իսկ justify-content հատկությունը՝ հորիզոնական դիրքը։

Давайте теперь расправимся с фотографиями. Зададим те же значения, что и первой фотографии:

Եկեք հիմա զբաղվենք լուսանկարներով: Սահմանեք նույն արժեքները, ինչ առաջին լուսանկարը.

Теперь не маловажная часть. Нужно правильно расставить текст. Для second-block-texts мы зададим размер, упорядочим по вертикали и сделаем текст в центре:

Հիմա ոչ քիչ կարևոր մաս. Դուք պետք է ճիշտ տեղադրեք տեքստը: second-block-texts-ի համար մենք այն կկազմավորենք, կդասավորենք ուղղահայաց և կկենտրոնացնենք տեքստը.

Теперь перейдём к нашему большому тексту. Нам нужно задать ему шрифт, размер, стиль, позицию и цвет.

Հիմա եկեք անցնենք մեր մեծ տեքստին: Պետք է դրան տառատեսակ, չափ, ոճ, դիրք ու գույն տանք:

Остался наш маленький текст.

Մնում է մեր փոքրիկ տեքստը։

Тут для вас ещё одно новое свойство: opacity. Opacity - устанавливает непрозрачность элемента. 1 - Непрозрачный, 0 - Прозрачный. Двигаемся уже не плохо. Чем больше практикуешь тем легче будет в дальнейшем.

Ահա ևս մեկ նոր հատկություն ձեզ համար՝ opacity. Opacity- սահմանում է տարրի անթափանցիկությունը: 1 - անթափանց, 0 - թափանցիկ: Մենք կամաց-կամաց առաջ ենք շարժվում: Որքան ավելի շատ պարապեք, այնքան ավելի հեշտ կլինի ապագայում:

<< Предыдущий Следующий >>
<< Նախորդը Հաջորդը >>