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