Najpomembnejša stvar pri oblikovanju spletnih strani je pravilna postavitev elementov. To lahko enostavno storite z uporabo razredov »pozicije« Tailwind. Pozicioniranje je lahko različnih vrst, ena od njih je statična.
Ta blog bo pokazal, kako statično postaviti element.
Kako statično postaviti element v DOM – zadnji veter?
Element je mogoče statično postaviti z uporabo ' statična ” razred položaja. Statični položaj je privzeti položaj za elemente HTML. Elementi z ' položaj: statičen ” so postavljeni glede na običajni potek strani, brez stilov CSS.
Sintaksa
Sintaksa za uporabo ' statična ” razred je:
Tukaj je lahko element katera koli oznaka, za katero je mogoče uporabiti atribut položaja.
Obiščite kodo za praktično izvedbo statičnega pozicioniranja:
< telo razred = 'središče za besedilo' >< center >
< h1 razred = 'text-green-600 text-5xl font-bold' >
Primer statičnega položaja
< / h1 >
< b >Razred položaja CSS v zadnjem vetru< / b >
< div razred = 'statično besedilo-levo p-2 m-2 bg-green-200 h-48' >
< str razred = 'font-krepko' >Statično pozicioniran< / str >
< div >Absolutni pozicionirani element< / str >
< / div >
< / div >
< / center >
< / telo >
V tej kodi:
- “ besedilno središče ” prilagodi vsebino oznak na sredino zaslona.
- Nastavite ' ' označite v zeleno z uporabo ' besedilo-zeleno-600 «, je velikost besedila nastavljena na petkrat z » besedilo-5×1 « in pisava je poudarjena z uporabo » pisava-krepko ”.
- dva ' ” se ustvarijo tudi elementi in nastavijo statični položaj na levi strani za prvi “ div ' uporabljati ' statično besedilo-levo ”.
- Dodelite razrede » p-2 ', ' m-2 ', ' bg-zelena-200 ', ' h-48 « za drugi div in prav tako nastavite njegov položaj na absolutni spodnji levi z uporabo » relativno spodaj-0 levo-0 ” razred.
Izhod
Shranite zgornjo kodo v datoteko in si predoglejte spletno stran, ki jo je ustvarila in bo prikazana kot:
Statično postavljen element se premika z običajnim tokom strani, medtem ko drugi element ohrani svoj absolutni položaj.
Zaključek
Če želite element statično postaviti v DOM z običajnim tokom dokumenta, uporabite » statična 'razred hrbtnega vetra' položaj ” pripomoček. Ta blog je pokazal, kako postaviti kateri koli element ' statično ” s preprostim praktičnim prikazom.