Miten rakentaa verkkosivun CSS taulukoiden sijasta taitossa ja positioning

ä float-määritettä. CSS et periaatteessa jakaa sivuston sisältöä lohkoissa rajaamaa /... /tageja. Float ominaisuuden avulla voit sijoittaa (float) osa sisältöä pitkin oikealle tai vasemmalle marginaalin oman lohkon. Loput sisällön että lohko virtaa ympärillä kelluva osa. Tehdään se. Tarvitsemme HTML-sivun ja CSS-tyylisivu. Katsotaanpa HTML ensimmäinen.

Kuten näette, olemme jakaneet jokaisen looginen osa meidän sivun lohkoissa.

Kuten näette, kaikki elementit meidän sivun (ylä-tai alatunnisteet, navigointi ja sisältö) sisältyvät lohkossa kutsutaan kontti, joka pohjimmiltaan on koko sivun. Me laitamme Sisällä "kontti" tilaa. Kuten voitte kuvitella, aiomme kellua navigointi lohkon vasemmalla meidän "kontti" block.

Tässä koodi toimii taikuutta.

Sanoin, en mene yksityiskohtiin tässä, selittää mitä jokainen komento keinoin. Mutta katsotaanpa tarkistaa sen nopeasti, muistuttaa meitä kiinnostaa. Ensinnäkin meidän määritetty fontin sivuja, täsmennetään sen ominaisuus.

Olemme myös osoitettu muotoilun H1 ja H2 tags.

"div # jotain" puhelut ovat, jos asetamme muotoilu ja erityinen käyttäytyminen kussakin lohkossa määrittelimme meidän html. Huomaathan puhelut navigointiin ja sisältöön. Me määritetty navigointi "left" omaisuutta, saattaa se vasemmalla puolella meidän sivulla. Sitten määritellään sarakkeen leveyden ja pääasiallinen sisältö marginaali pylväästä. Huomaathan "selvä: vasen" määritteen me määritetty footer. Yleinen virhe on unohtaa tämän ominaisuuden footer.

Jos unohdat sen, sinun footer ei sijoitettu alareunaan sivun, mutta alareunassa päävalikkoon alueen ja vasemmalla navigointijärjestelmän alueella. Jos navigointi alue on pidempi kuin pääasiallinen sisältö, se laajentaa alapuolelle alatunnisteen. Käyttämällä "selvä: vasen" ominaisuus vältämme tämän yhteisen virhe. Voit väittää, että voimme päästä samaan tulokseen vähemmällä vaivalla ja vähemmän koodia käyttäen taulukoita.

Mutta muistakaa: tämä on vain hyvin nopea miten, minä vain kosketti hyvin pinta CSS vastata yleinen kysymys: miten voin suunnitella tableless sivu CSS? Jotta saat käsityksen valtaa CSS, jos haluamme muuttaa pystysuorasta navigointi vaaka valikkoon, kaikki meidän täytyy tehdä on muuttaa muutaman rivin koodia meidän CSS ja layout kaikkien sivujen muuttuvat.