Веб програмери користе ХТМЛ компоненте, као што су заглавља и подножја, навигација, див, слика и многе друге да поделе веб страницу и уграде садржај. Тачније, „ <див> ” елемент је популарна ХТМЛ компонента која пружа једноставан начин за поделу странице на секције. Неки корисници желе да направе “<див>” компоненте вертикално или хоризонтално померајућим да би сачували простор на веб страници.
Овај пост ће демонстрирати метод за прављење вертикално померајућег дива помоћу ЦСС-а.
Како направити/направити див који се може вертикално помицати помоћу ЦСС-а?
Да бисте креирали див који може да се помера вертикално коришћењем ЦСС-а, пратите дата упутства.
Корак 1: Додајте наслов
Пре свега, додајте „ <центар> ” ознака за додавање података у центар странице. Затим уметните наслов користећи „ <х1> ” ознака.
Корак 2: Направите див контејнер у ХТМЛ-у
Након тога, креирајте „ <див> ” контејнер и доделите класу под називом “ сцролл-див ”. Након тога, додајте текст или пасус између ознака <див>:
< центар >
< х1 > Линукхинт Вебсите х1 >
< див класа = 'сцролл-див' > Линукхинт је популарна веб локација за креирање садржаја. изградила је многе производе да помоћ научите о Линуку, програмирању, рачунарству и још много тога. Ова платформа омогућава рад на различитим категоријама, укључујући ХТМЛ / ЦСС, јавасцрипт, Гит, Виндовс, Доцкерс, Дисцорд и многи други. Он пружа а комплетан водич о овим категоријама. Корисници могу наћи било коју тему у вези са поменутом категоријом. У овој ситуацији ако Ви сте почетник, можете се позвати на смернице за писање чланка.
див >
центар >
Излаз
Корак 3: Стилски наслов
Приступите елементу наслова тако што ћете навести име ознаке између ознака <стиле>. Затим примените „ боја ” својство за постављање боје наслова:
х1 {боја: ргб ( 81 , 173 , 226 ) ;
}
Може се приметити да је боја наслова промењена:
Корак 4: Учините див померајућим
Затим користите „. сцролл-див ” да бисте приступили ХТМЛ <див> елементу и применили следећа ЦСС својства:
.сцролл-див {паддинг:5пк;
маргин:5пк;
боја позадине: ргб ( 179 , 180 , 233 ) ;
ширина: 400пк;
висина: 120пк;
оверфлов-и: ауто;
оверфлов-к: скривено;
тект-алигн:јустифи;
}
У горњем коду су примењена следећа својства ЦСС-а:
- “ паддинг ” је постављен као „ 5пк ” да доделите простор унутар елемента див.
- “ Маргина ” је постављен као „ 5пк ” за креирање простора ван границе див.
- “ боја позадине ” атрибут додељује боју елемента на позадини.
- “ ширина ” одређује величину контејнера у ширини.
- “ висина ” атрибут додељује висину елемента.
- “ преливање-и ” се користи да би се елемент могао померати постављањем његове вредности као „ ауто ”:
- “ оверфлов-к ” је постављен као „ сакривен ” да би див могао да се помера само вертикално.
- “ Поравнање текста ” се користи за поравнавање текста. На пример, поравнали смо текст као „ оправдати ”.
Може се приметити да смо успешно направили див вертикално померајући:
Навели смо метод за вертикално померање дива помоћу ЦСС-а.
Закључак
Да бисте направили див вертикално померајући помоћу ЦСС-а, прво направите див са атрибутом класе. Атрибут класе се користи за приступ „ див ” елемент. Затим поставите ЦСС “ оверфлов-к “ својство као “ сакривен ” и „ преливање-и “ својство као “ ауто ” на атрибуту класе да би елемент див могао вертикално да се помера. Овај водич је демонстрирао метод за прављење дива вертикално померајућим помоћу ЦСС-а.