CSS verkkosivuston asettelu

Verkkosivustojen järjestely

Verkkosivustoja voidaan jakaa yleensä otsikkopalkkiin, valikkoon, sisältöön ja alatunnisteeseen:

On olemassa monia erilaisia järjestelyjä valittavana, mutta yllä oleva rakenne on yksi yleisimmistä rakenteista, jota tarkastelemme tarkemmin tässä oppaassa.

Otsikkopalkki

Otsikkopalkki (header) sijaitsee yleensä verkkosivuston ylälaidassa (tai ylętävän valikon alla). Se sisältää usein logon (logon) tai verkkosivuston nimen:

Esimerkki

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Tulos:

Otsikkopalkki

Kokeile itse

Navigaatiopalkki

Navigaatiopalkki sisältää linkkilistan, joka auttaa kävijöitä selaamaan verkkosivustoasi:

Esimerkki

/* navbar-kontti */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar-linkki */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Linkki - muuttuu värillä hiiren osoitetta kohdatessa */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Tulos:

Kokeile itse

Sisältö

Mikä järjestely on käytössä, riippuu yleensä kohdeyleisöstäsi. Yleisimmät järjestelyt ovat seuraavista yhdistelmistä (tai niiden yhdistelmistä):

  • 1-sarakettaAsettelu (yleensä käytetään mobiiliselaajissa)
  • 2-sarakettaAsettelu (yleensä käytetään tableteissa ja kannettavissa tietokoneissa)
  • 3-sarakettaAsettelu (ainoastaan tietokoneille)

1-saraketta:

2-saraketta:

3-saraketta:

Luoemme 3-sarakkeisen asettelun ja muutamme sen 1-sarakkeiseksi pienemmillä näytöillä:

Esimerkki

/* Luo kolme yhtä suurta saraketta, jotka ovat toisilleen vierekkäin pylväillä */
.column {
  float: left;
  width: 33.33%;
}
/* Poistaa pylväät sarakkeiden jälkeen */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Resonsiivinen asettelu - Asettaa kolme saraketta rinnakkain, ei vartioi pienemmillä näytöillä (leveys 600 pikseliä tai pienempi) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Tulos:

Kattava verkkoteknologian viittauskäsikirja

Meidän viittauskäsikirjamme kattaa verkkoteknologian kaiken puolen.

Tämä sisältää W3C-standardit: HTML, CSS, XML. Muita teknologioita ovat JavaScript, PHP, SQL ja niin edelleen.

Verkkosivuston esimerkkitesti

CodeW3C.comilla tarjoamme tuhansia esimerkkejä.

Voit muokata näitä esimerkkejä ja kokeilla koodia verkkosivuston online-editorin avulla.

Nopea ja ymmärrettävä oppimistapa

Aika on kultaa, joten tarjoamme sinulle nopeita ja ymmärrettäviä oppimismateriaaleja.

Tässä voit saada tarvitsemasi tiedon helposti ymmärrettävässä muodossa.

Kokeile itse

Vinkki:Jos haluat luoda 2-sarakkeisen asettelun, muuta leveys 50%:iin. Jos haluat luoda 4-sarakkeisen asettelun, käytä 25%:ia.

Vinkki:Haluatko tietää, miten @media-sääntö toimii? Lue lisää meidän CSS media-tarkistukset Tässä luvussa voit oppia lisää.

Vinkki:Yksi nykyaikaisimmista tavoista luoda sarakkeiden asettelu on käyttää CSS Flexboxia. Mutta Internet Explorer 10 ja aikaisemmat versiot eivät tue sitä. Jos tarvitset IE6-10-tuen, käytä pylväitä (kuten yllä olevassa esimerkissä).

Lue lisää Flexible Box -asettelumoduulista meidän CSS Flexbox Oppaat.

Eri leveydet

Pääsisältö (main content) on verkkosivustollasi suurin ja tärkein osa.

Sarakkeiden leveydet ovat erilaisia, koska suurin osa tilasta on varattu pääsisällölle. Lisäsisältö (jos on olemassa) käytetään yleensä vaihtoehtona navigaatioon tai tietojen määrittämiseen, jotka liittyvät pääsisältöön. Voit muuttaa leveyttä vapaasti, mutta muista, että niiden summa tulisi olemaan 100%:n.

Esimerkki

.column {
  float: left;
}
/* Vasen ja oikea sarakkeet */
.column.side {
  width: 25%;
}
/* Keskipalkki */
.column.middle {
  width: 50%;
}
/* Responsive layout - Asettaa kolme saraketta rinnakkain, ei vartioi */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Tulos:

Kattava verkkoteknologian viittauskäsikirja

Meidän viittauskäsikirjamme kattaa verkkoteknologian kaiken puolen.

Tämä sisältää W3C-standardit: HTML, CSS, XML. Muita teknologioita ovat JavaScript, PHP, SQL ja niin edelleen.

Verkkosivuston esimerkkitesti

CodeW3C.comilla tarjoamme tuhansia esimerkkejä.

Voit muokata näitä esimerkkejä ja kokeilla koodia verkkosivuston online-editorin avulla.

Nopea ja ymmärrettävä oppimistapa

Aika on kultaa, joten tarjoamme sinulle nopeita ja ymmärrettäviä oppimismateriaaleja.

Tässä voit saada tarvitsemasi tiedon helposti ymmärrettävässä muodossa.

Kokeile itse

Alatunniste

Alatunniste sijaitsee sivun alaosassa. Se sisältää yleensä tietoja, kuten tekijänoikeuksia ja yhteystietoja:

Esimerkki

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Tulos:

Alatunniste

Kokeile itse

Vastausvaihteleva verkkosivuston asettelu

Käyttämällä yllä olevia CSS-koodia luomme mukautuvan verkkosivuston asettelun, joka vaihtaa kahden sarakkeen ja täysileveysaskeleen välillä näytön leveyden mukaan:

Kokeile itse