CSS 网站布局

Nettstedslayout

Nettsteder deles vanligvis inn i hode, meny, innhold og bunntekst:

Det er mange forskjellige layoutdesigner tilgjengelige. Men, den ovennevnte strukturen er en av de mest vanlige, og vi vil studere den nøye i denne veiledningen.

Hode

Hode (header) ligger vanligvis øverst på nettstedet (eller under toppmenyen). Den inneholder vanligvis et logo eller navnet på nettstedet:

Eksempel

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

Resultat:

Hode

Prøv det selv

Navigasjonsfanen

Navigasjonsfanen inneholder en liste over lenker som hjelper besøkende å navigere på nettstedet ditt:

Eksempel

/* navbar-container */
.topnav {
  overskuelig: skjult;
  bakgrunn-farge: #333;
}
/* Navbar-lenker */
.topnav a {
  float: left;
  visning: blokk;
  farge: #f2f2f2;
  text-align: center;
  marg: 14px 16px;
  tekstdekorasjon: ingen;
}
/* Lenke - endring av farge ved musoverføring */
.topnav a:hover {
  bakgrunn-farge: #ddd;
  farge: svart;
}

Resultat:

Prøv det selv

Innhold

Hvilken layout du bruker, avhenger vanligvis av dine målbrukere. De vanligste layoutene er en av følgende (eller en kombinasjon av dem):

  • 1-kolonneLayout (normalt brugt på mobile browsere)
  • 2-kolonneLayout (normalt brugt på tablets og bærbare computere)
  • 3-kolonneLayout (kun til skrivebord)

1-kolonne:

2-kolonne:

3-kolonne:

Vi vil oprette en 3-kolonneinddeling og ændre den til 1-kolonneinddeling på mindre skærme:

Eksempel

/* Opret tre ens kolonner, der ligger ved siden af hinanden og flyder */
.column {
  float: left;
  width: 33.33%;
}
/* Ryd flydende efter kolonner */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsiv layout - Gør tre kolonner stående i stedet for ved siden af hinanden på mindre skærme (bredde på 600 pixel eller mindre) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Resultat:

Komplet websiteteknologi referencerhåndbog

Vores referencerhåndbog dækker alle aspekter af websiteteknologi.

Dette inkluderer W3C-standardteknologi: HTML, CSS, XML. Derudover andre teknologier såsom JavaScript, PHP, SQL osv.

Online eksempeltestværktøj

På CodeW3C.com tilbyder vi tusindvis af eksempler.

Ved at bruge vores online redigeringsværktøj kan du redigere disse eksempler og eksperimentere med koden.

Hurtig og let forståelig læring

En tidsminut er en guldminut, så vi giver dig hurtig og let forståelig læring.

Her kan du få den viden, du har brug for, på en forståelig og praktisk måde.

Prøv det selv

Tip:For at oprette en 2-kolonneinddeling, ændr bredden til 50%. For at oprette en 4-kolonneinddeling, brug 25%.

Tip:Er du nysgerrig efter, hvordan @media-reglen fungerer? Læs vores CSS medieforespørgsler Lær mere om relaterede emner i dette kapitel.

Tip:En mere moderne måde at oprette en kolonneinddeling på er ved at bruge CSS Flexbox. Men Internet Explorer 10 og ældre versioner understøtter det ikke. Hvis du har brug for IE6-10-understøttelse, skal du bruge flydende (som vist ovenfor).

For mere information om Flexbox layoutmodulet, læs vores CSS Flexbox Tutorial.

Ulige kolonner

Hovedindholdet (main content) er den største og vigtigste del af din hjemmeside.

Det er almindeligt med forskellige kolonnebredder, fordi de fleste af pladsen er reserveret til hovedindhold. Tilføjende indhold (hvis nogen) bruges typisk som alternativ navigering eller for at specificere information, der er relateret til hovedindholdet. Du kan frit ændre bredden, men husk, at den samlede bredde skal være 100%:

Eksempel

.column {
  float: left;
}
/* Venstre og højre kolonner */
.column.side {
  width: 25%;
}
/* Mellemkolonne */
.column.middle {
  width: 50%;
}
/* Responsiv layout - Gør tre kolonner stående i stedet for ved siden af hinanden */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Resultat:

Komplet websiteteknologi referencerhåndbog

Vores referencerhåndbog dækker alle aspekter af websiteteknologi.

Dette inkluderer W3C-standardteknologi: HTML, CSS, XML. Derudover andre teknologier såsom JavaScript, PHP, SQL osv.

Online eksempeltestværktøj

På CodeW3C.com tilbyder vi tusindvis af eksempler.

Ved at bruge vores online redigeringsværktøj kan du redigere disse eksempler og eksperimentere med koden.

Hurtig og let forståelig læring

En tidsminut er en guldminut, så vi giver dig hurtig og let forståelig læring.

Her kan du få den viden, du har brug for, på en forståelig og praktisk måde.

Prøv det selv

Fodnote

Fodnote er placeret i bunden af siden. Den indeholder normalt oplysninger som ophavsret og kontaktinformation:

Eksempel

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

Resultat:

Fodnote

Prøv det selv

Responsivt webstedslayout

Ved at bruge ovenstående CSS-kode har vi oprettet en tilpasningsdygtig webstedslayout, der skifter mellem to kolonner og en bred kolonne baseret på skærmens bredde:

Prøv det selv