Hvordan lage en DIV layout

February 22

Divisjonen (DIV) tag gir Hyper-Text Markup Language (HTML) utviklere med beholdere som setter oppsettet for et nettsted mal. Ved hjelp av DIV-koder for å lage en mal som kalles \ "table-mindre CSS. \" CSS betyr Cascading Style Sheet. Tabeller ble tidligere brukt til å designe hvordan HTML-elementer som vises på en side. CSS og DIV tags gi en enklere programmering stil, så koden er renere. Ved hjelp av DIV-koder reduserer sjansen for manglende tabellelementer, noe som fører til at nettstedet skal produsere feil i leserens nettleser.

Bruksanvisning

1 Åpne HTML-fil med ren tekst editor. I \ "kroppen \" tags, legge til følgende DIV kode:

I dette eksempelet \ "div_main \" inneholder hovednettstedet innhold sentrum,. Listen DIV er å gi et navigasjonsfelt på venstre og høyre side av siden.

2 Bestemme klassen for hoved DIV. Plasser klassen layout kode i \ "Leder \" tags på toppen av HTML-koding side. Følgende kode setter hoved DIV til midten av siden:

div_main {

margin-left:11.3em

GÅ

margin-right:11.3em

GÅ

padding-left:0em

GÅ

padding-right:0em

GÅ
}
</ Style>

3 Formater \ "left_list \" DIV. Nettsteder ofte har en venstre navigasjonsfeltet. I dette eksempel er en venstre navigasjons DIV opprettet. Den går loddrett ned på venstre side av brukerens nettleser. Bruk følgende kode for å formatere venstre DIV:

div.left-lista {

width:11.3em

GÅ

position:absolute

GÅ

top:1

GÅ

font-size:95%

GÅ

padding-left:2%

GÅ

padding-right:2%

GÅ

margin-left:1

GÅ

margin-right:1

GÅ

left:0

GÅ
}

Plasser denne koden i den \ "style \" tag opprettet i trinn to.

4 Sett oppsettet for høyre navigasjonsfeltet. Dette skaper en vertikal navigasjonsfeltet på høyre side som samsvarer med høyden og bredden på venstre DIV. Dette gir en enhetlig layout. Følgende kode fullfører din DIV mal layout:

div.right-lista {