Mikä on asettelun lohkon? Miten asettaa yhden sivun sivuston omasta?

On halu oppia tekemään omia sivuja sivustoja? Sitten Katsotaanpa oppinut mitä lohko asettelua. Asettelu noviisi tavata useita ongelmia, heillä on paljon kysymyksiä. Mieti mitä lohko koodausta.

Tärkeä vihje

Käytä WYSIWYG editori, joten kaikki oli selvempi. Ne, jotka tietävät HTML hyvin, työ kannettavan, koska he ymmärtävät kaiken. Ja aloittelijat voivat hyödyntää ohjelmia, kuten FrontPage tai esimerkiksi, Dreamweaver.

Tyypit layout sivustoja

On olemassa useita erilaisia layout:

1. Taulukkomuodossa.
2. Lohko.
3. Sekoitettu.

Olemme kiinnostuneita lohkon asettelua. Mikä erottaa sen taulukosta? Lohkossa ulkoasu käyttämällä div tag on tiettyjä etuja:

1. Lataa muotoilun kanssa lohkojen nopeammin.
2. Sisältö näytetään lohkot (toisin taulukot) kuin lataus tapahtuu. Kuten on tunnettua, nämä taulukoissa näytetään vasta sen jälkeen, koko taulukon.
3. Koodi div-s helpompi lukea.

Se ei ole kaikki edut, joka on kuuluisa lohkon asettelua.

Miten muuttaa paikan div-lohkot?

Tämä auttaa meitä kellua - tämä ominaisuus, joka pystyy seuraavasti:

1. Tasaus vasemmalle - vasemmalle.
2. Yhdenmukaistaa oikeassa - oikea.
3. Elementti pysyy missä hän oli, hän ei liiku, jos annettu yhtään. Tämä arvo on oletuksena.

Toinen tärkeä ominaisuus, joka tarvitaan - selvä. Hän voi olla 4 arvot:

1. Asennuksen edellisessä kohde, siirtyä oikealle, lohko - oikea.
2. Vasen sarjaa alle edellisen elementin, joka siirretään vasemmalle.
3. Molemmat - asennus aiempien joutuneiden lohkon.
4. Yksikään osoittaa ilman rajoituksia asemaan lohkon suhteessa ne elementit, jotka siirretään.

esimerkki

Mieti, kuinka se näyttää lohkon asettelu div. Laadimme koodi:

Näitä sääntöjä näet tuloksen. Siten, perusteella useita ominaisuuksia voidaan säätää estää järjestely halutulla tavalla. Siirry seuraavassa hetkessä. Olemme käyttäneet text-align: center, yhdenmukaistaa kunkin lohkon tahansa selaimella.

Kuten näette, se on melko yksinkertainen lohko ulkoasu sivuston. On tärkeää tutkia ja harjoitella enemmän ominaisuuksia, jotka luovat joustavamman rakenteen sivuja.

Jotain tärkeämpää

On yksi suosittu ominaisuus, jota käytetään layout - asema, sitä käytetään paikoillaan.

Arvot ominaisuuksien kannan:

1. Suhteellinen - asettaa elementtien asento suhteessa alkuperäisiin paikkoihin. Jätetyn hakemuksen, alkuun, Righ, pohjaosa liikkuu tiettyyn suuntaan.
2. Staattinen - normaali näyttö kohteen. Ei ole mitään järkeä käyttää oikealle / vasemmalle, ylös / alas - se voi johtaa mitään.
3. Absoluuttinen - absoluuttinen paikannus elementti.
4. Kiinteät - absoluuttiset. Se on sidottu tiettyyn pisteeseen ruudulla, mutta se ei muuta kantaansa, vaikka sivu käännetään.

Monet asettelu huomannut, että kun käytetään kiinteää, absoluuttinen ja suhteellinen asemointi lohkojen päällekkäin. Ja sitten mielenkiintoista tietää, mikä estää alla, joka edellä. Voit vastata tähän kysymykseen, sinun täytyy pinotaso. Se toi asettelu estää uudelle tasolle. Tämä tekee mahdolliseksi ei vain tehdä paikannus tasossa, mutta myös avulla kolmannen akselin Z arvo sellainen ominaisuus, voi olla positiivinen tai negatiivinen.

Luo 3 korttelin. Seuraava, koe ehdottoman paikannus.

Kuten näette, se on helppo vaihtaa asentoa lohkoja. Perusteella, että sinulla on nyt mahdollisuus, tehdä peruslohkoa asettelu sivulle. Soveltamalla enemmän ominaisuuksia voit parantaa taitoja.