Elementtien sijoittaminen verkkosivulle CSS-sijaintiominaisuuden avulla

Saattaa 18, 2024

Ennen CSS-tyylisivuja sinulla oli rajoitettu määräysvalta verkkosivustollasi olevien esineiden sijainnin suhteen. Voit käyttää HTML-taulukkoa ohjataksesi paikannusta hieman, mutta tämä ei ollut kovin tarkka. Nyt CSS: llä voit hallita tarkkaan, kuinka jokainen elementti on sijoitettu verkkosivullesi.

Ennen kuin voit käyttää CSS-sijaintiominaisuutta verkkosivujen elementtien sijoittamiseen, meidän on keskusteltava terminologiasta, jota käytetään kommunikoimaan verkkoselaimen kanssa. CSS ei ota huomioon vain verkkosivusi leveyttä ja korkeutta, vaan myös selaimen mitat.

Selaimen leveys ja korkeus
Aluksi saatat ajatella, että tämä viittaa avoimeen selainikkunaan. Mutta se todella viittaa koko selaimeen, mukaan lukien säätimet ja painikkeet.
Live-leveys ja -korkeus
Tämä on selaimen näyttöalueen termi. Se ei sisällä säätimiä.
Asiakirjan leveys ja korkeus
Tämä on verkkosivusi koko leveys ja korkeus. Jos nämä mitat ovat suurempia kuin suora leveys ja korkeus, selain näyttää vierityspalkit tarpeen mukaan.

Nyt kun tiedät rajat, joilla voit sijoittaa verkkosivusi osat CSS: n avulla, katsotaanpa neljää sijaintiarvoa.

Staattinen
Tämä on oletusasetus. Ellei toisin määritetä elementille, selain käyttää staattista paikannusta. Aivan kuin kuulostaa, staattisella paikannuksella et voi siirtää elementtejä verkkosivulle. Joten miten selain määrittää, mihin kukin objekti verkkosivustollesi laitetaan? Se sijoittaa jokaisen elementin siinä järjestyksessä kuin ne esiintyvät HTML-koodissasi. Jos sinulla on logo, sitten tervehdys ja sitten tekijänoikeusilmoitus HTML-muodossa, selain sijoittaa ne verkkosivulle samassa järjestyksessä. Et voi siirtää tervehdystä logokuvan yläpuolelle.
suhteellinen
Suhteellinen paikannus toimii samalla tavalla kuin staattinen siinä mielessä, että HTML-koodin elementtien järjestys ohjaa sivun elementtien virtausta. Voit kuitenkin käyttää suhteellista paikannusta elementin sijainnin ohjaamiseen suhteessa verkkosivun muihin elementteihin.
absoluuttinen
Kun käytät absoluuttista paikannusta elementin kanssa, tämä tekee elementistä riippumattoman muusta verkkosivusta. Koska sen sijaintia ei enää määritetä HTML: n järjestyksessä, sinun on käytettävä X- ja Y-koordinaatteja elementin sijoittamiseen.
kiinteät
Tämä toimii samalla tavalla kuin absoluuttinen paikannus. Elementti, jolla on kiinteä sijainti, ei kuitenkaan vieritä verkkosivun kanssa. Tämä on hieno ominaisuus, jota voidaan käyttää logossa tai valikossa, jonka haluat pysyvän näkyvänä sivun vieritettäessä.

Video-Ohjeita: Ruby on Rails by Leila Hofer (Saattaa 2024).

Elementtien sijoittaminen verkkosivulle, jossa CSS-sijaintiominaisuus, HTML, CSS, CSS-sijaintiominaisuus, staattinen paikannus, suhteellinen paikannus, ehdoton paikannus, kiinteä paikannus, miten elementit sijoitetaan verkkosivulle, CSS: n avulla elementtien sijoittamiseen verkkosivulle

Edellinen Artikkeli

Seuraava Artikkeli

Aiheeseen Liittyviä Artikkeleita

tietokoneet

Liikeprojektin hattuhäät Tallenna päivämäärä

Saattaa 2024

Tässä liikkeessäR Opetusohjelma, saat loppuun Save the Date -projektin lisäämällä suunnitteluselementit, jotka kehystävät valinnaisen tekstialueen. Asiakas voi lisätä omat Save the Date -tiedot...

tietokoneet

Tuotearvostelu - MotionArtist 3.0

Saattaa 2024

MotionArtistTM on mallipohjainen, helppokäyttöinen ohjelmisto, jonka avulla voit luoda FlashinR animaatiot verkkosivustollesi. Voit luoda Flash-Web-bannereita, navigointivalikkoja,...