Slik formaterer et nettsted med div koder

Slik formaterer et nettsted med div koder


Nettstedet DIV-koder hjelpe deg gruppere deler av HTML-innhold som tekst, tabeller og bilder. Du kan sette ulike parametere for DIV, for eksempel størrelse og posisjon. Websiden data er begrenset til plassen definert ved sin inneholder DIV. Bruk CSS-stiler å formatere din nettside layout ved hjelp av DIV-koder.

Bruksanvisning

1 Åpne din webside ved hjelp av en tekst eller HTML editor. Bruk følgende eksempel for å lage en to-kolonne layout.

2 Skriv inn CSS stil for de to divs og legge den over "</ head>" tag:

<Style>

divLeft {

left:12px;

width: 300px;

position: absolute;

}

divRight {

margin-left:400px;

width: 300px;

position: relative;

}

</ Style>

3 Skriv inn nye stiler til dine DIV innhold tags:

<Div id = "divLeft"> Venstre side div data ... </ div>

<Div id = "divRight"> Høyre side div data ... </ div>

Den første DIV settes til absolutt posisjon og vil flyte i henhold til noen data over den. Den relative posisjon av den andre DIV får den til å følge til toppen innretting av den første.

4 Lagre dokumentet og teste den i en nettleser.

Hint

  • Bruk et eksternt stilark for å gjøre CSS tilgjengelig for flere websider i området. Opprett en fil med et "CSS" forlengelse. Inkluder div stiler uten "<style> </ style>" tags og lagre det.
  • Referanse stilarket på websidene med en "<link>" tag plassert over "</ head>" tag:
  • <Link href = "styles.css" rel = "stylesheet" type = "text / css">