Kūrėjai nustato vaizdo padėtį, kad nustatytų aiškią vaizdinę hierarchiją, nustatydami vaizdo tvarką ir matmenis, palyginti su kitais HTML elementais. Pateikus vaizdą įvairiose pozicijose, taip pat galima sukurti modernų, unikalų ir individualų dizainą, kuris gali pakeisti svetainės išvaizdą ir pojūtį. Šiame straipsnyje parodyta vaizdo padėties nustatymo naudojant CSS procedūra.
Kaip nustatyti vaizdo padėtį CSS?
Nustačius vaizdo padėtį CSS sistemoje, gaunama tokių pranašumų kaip „ tikslus išdėstymas “, „ persidengiantis elementas “ ir „ jautrus dizainas “ galima lengvai pasiekti. Naudodamiesi šiais pranašumais, kūrėjai gali lengvai tinkinti ir sukurti visiškai funkcionalią ir akį traukiančią svetainę. Yra du būdai / ypatybės, kuriomis galima nustatyti vaizdo padėtį. Šios savybės aprašytos toliau:
1 būdas: plūduriuojančios savybės naudojimas
„ plūdė CSS suteikia ypatybę, skirtą HTML elementų judėjimui paliko “ arba „ teisingai ' kryptis. Jis dažniausiai naudojamas kuriant interaktyvų išdėstymą, kad būtų galima tiksliai išdėstyti HTML elementus.
Pavyzdžiui, ypatybė „plūduriuoti“ naudojama vaizdams lygiuoti tiek kairėje, tiek dešinėje tinklalapio pusėse:
< div >
< img src = 'bg.jpg' aukščio = '300 piks.' plotis = '400 piks.' klasė = „dešinė padėtis“ >
< img src = 'knyga.jpg' aukščio = '300 piks.' plotis = '400 piks.' klasė = 'pozicija kairėje' >
div >
Aukščiau pateiktame kode:
-
- Pirma, šaknis ' div “ yra sukurtas elementas, kuris veikia kaip HTML elementų konteineris.
- Toliau du '
'' žymos naudojamos '' viduje
“ žymą.- Po to vertės „ 300 piks “ ir „ 400 piks “ pateikiami „ aukščio “ ir „ plotis 'abiejų atributai'
“ žymas.
- Taip pat priskirkite klasę „ padėtisDešinė “ ir „ padėtis Kairė “ į pirmą ir antrą „
“ žymas atitinkamai.
Dabar įveskite „
< stilius >“ žymą, kad pritaikytumėte šias CSS ypatybes:
.dešinė padėtis {
plūdė: dešinė;
}
.pozicijaKairėje {
plūdė: kairė;
}
stilius >
Aprašymas pateikiamas žemiau:
-
- Pirmiausia pasirinkite „ padėtisDešinė “ klasę ir nustatykite „“ reikšmę teisingai 'į savo' plūdė ' nuosavybė. Taip pasirinktas HTML elementas tinklalapyje perkeliamas teisinga kryptimi.
- Tada pasirinkite „ padėtis Kairė “ klasę ir pateikite „“ vertę paliko “ į „ plūdė ' nuosavybė. Tai perkelia elementą į kairę pusę.
Pasibaigus kompiliavimo etapui:
Išvestis rodo, kad vaizdai buvo nustatyti kairėje ir dešinėje.2 būdas: objekto padėties ypatybės naudojimas
„ objektas-pozicija “ ypatybė užtikrina vaizdo arba HTML elemento patalpinimą konkrečioje tinklalapio vietoje. Tai leidžia valdyti horizontalią ir vertikalią padėtį, leidžiančią vartotojui pasiekti norimą vizualinį efektą arba išdėstymą. Jį daugiausia naudoja kūrėjai norėdami apkarpyti vaizdus, kurti miniatiūras, pasirinktinius maketus ir kt.
Ši nuosavybė gali turėti tiek skaitines, tiek raktinio žodžio reikšmes. Pavyzdžiui, tiek skaitinės, tiek raktinio žodžio reikšmės pateikiamos „ objektas-pozicija ' nuosavybė. Jis nustato vaizdo padėtį CSS toliau pateiktame kodo fragmente:
< stilius >
.skaitinės reikšmės
{
objekto padėtis: 100 pikselių 20 pikselių;
}
.keywordValues
{
objekto padėtis: kairė;
}
stilius >
< kūnas >
< div >
< img src = 'knyga.jpg' aukščio = „300 piks.“ plotis = '400 piks.' klasė = 'keywordValues' >
< img src = 'bg.jpg' aukščio = '300 piks.' plotis = '400 piks.' klasė = 'skaitinės vertės' >
div >
kūnas >
Aukščiau pateiktame kodo fragmente:-
- Pirma, „ skaitinės vertės “ klasė yra pasirinkta viduje “
“ žymą. Ir skaitinės vertės „ 100px 20px “ yra pateikiami CSS “ objektas-pozicija ' nuosavybė. „ 100 piks “ yra tarpas, pridėtas horizontalia kryptimi, o „ 20 piks “, skirta vertikaliai. - Toliau „ raktažodžių reikšmės “ yra pasirinkta klasė ir raktinio žodžio reikšmė „ paliko “ pateikiama „ objektas-pozicija “ savybę, kad vaizdas būtų sulygiuotas kairiąja kryptimi.
- Po to viduje „
” žyma sukuriami du vaizdai, kuriems priskiriamos aukščiau sukurtos klasės.
- Pirma, „ skaitinės vertės “ klasė yra pasirinkta viduje “
Pasibaigus kompiliavimo etapui, tinklalapis atrodo taip:
Momentinė nuotrauka iliustruoja, kad vaizdai dabar nustatyti tam tikrose vietose.Išvada
Vaizdo padėtį galima nustatyti naudojant CSS “ plūdė “ ir „ objektas-pozicija “ savybes. „ plūdė “ ypatybė paima raktinį žodį kaip reikšmę ir perkelia elementą į kairę arba dešinę padėtį. Kita vertus, „ objektas-pozicija “, paima tiek raktinių žodžių, tiek skaitines reikšmes horizontalia ir vertikalia kryptimis. Šiame straipsnyje parodyta vaizdo padėties nustatymo procedūra CSS.
- Po to vertės „ 300 piks “ ir „ 400 piks “ pateikiami „ aukščio “ ir „ plotis 'abiejų atributai'