The Very Basics of a Div-based Website: 7 Steps
The Very Basics of a Div-based Website: 7 Steps

Innholdsfortegnelse:

Anonim

Denne instruksen vil vise deg det grunnleggende om hvordan du bygger et nettsted med divs. Fordi tabeller som brukes til layout er onde!: pFor å forstå dette instruerbare må du kjenne grunnleggende html og css. Hvis du ikke forstår noe, kan du spørre. Min personlige hjemmeside bruker også denne typen div -struktur. Http://www.erwtje.net Nyt

Trinn 1: Lag de grunnleggende filene

Lag først din html -fil. Vi legger til det grunnleggende. CSS -filen vil være tom for now.html -filen inneholder nå: test Lagre HTML -filen din som something.html. Du kan velge navnet selv. CSS -filen din må lagres som.css. Sørg for at du gir det samme navn som nevnt i html -filen. I dette tilfellet "style.css". Vi har nå en ren tom html -side når den forhåndsvises i nettleseren vår.

Trinn 2: Rediger brødteksten for grunnleggende farger, fonter, …

Vi lar HTML -filen være slik den er, og redigerer bare css -filen. Legg til følgende kode i css -filen: body {background: #444444; font-family: verdana, arial, sans-serif; farge: #444444; skriftstørrelse: 12px; margin: 0px;} Med denne biten av kode definerer vi alle egenskapene til brødteksten. Siden alt innholdet er i brødteksten, vil disse innstillingene påvirke hele siden. Bakgrunnen og skriftfargen (farge) er satt til en mørk grå skrift. Skriftfamilien (font-familie) er satt til verdana. Hvis datamaskinen som brukes for å se nettstedet vårt ikke har skriften "verdana", vil det vise nettstedet vårt med skriften "arial". Du kan legge til flere fonter på listen. "Sans-serif" er den generiske typen som vil bli brukt når ingen font du oppga var tilgjengelig. Skriftstørrelsen (skriftstørrelse) er satt til 12 piksler. Dette er en absolutt verdi. Hvis du vil redigere andre skriftstørrelser (som overskrifter, avsnitt, menyelementer, …) kan du bruke den relative enheten "em" i stedet for "px". På denne måten, hvis du vil endre størrelsen på nettstedet ditt, trenger du bare å endre kroppstypestørrelsen. Margen er satt til 0px for alle fire sidene av brødteksten. Dette er gjort for å sikre at nettstedet vil holde seg til toppen av vinduet.

Trinn 3: Legge til en beholder med topptekst og innhold

Vi legger nå til beholderen. Dette er ganske enkelt en sentrert div som vil inneholde hele nettstedet vårt. I denne beholderen legger vi til to divs til; en innholds div og en overskrift div. Vår html -fil vil nå se slik ut: test innholdshode Vi legger til følgende kode i vår css -fil: div#container {width: 800px; margin: 0px auto; bakgrunn: #FFFFFF; polstring: 0px;} div#innhold {bredde: 800px; polstringstopp: 100px; bakgrunn: gul;} div#header {bredde: 800px; høyde: 100px; bakgrunn: blå; posisjon: absolutt; top: 0px;}. clearfix: etter {content: "."; display: blokk; høyde: 0; klart: begge; synlighet: skjult;}. clearfix {display: inline-block;}/* Skjul for IE Mac \*/. clearfix {display: block;} div#container betyr at vi har en div-tag med id "container". Vi legger til noen farger og en "margin: 0px auto;" for å sikre at beholderen er sentrert på siden. Vi må gi innholdet en polstringstopp og toppteksten en absolutt verdi med en "topp: 0px" for å sikre at overskriften er plassert over det andre innholdet. Ikke bry deg om det de stygge fargene. Det er bare for å gjøre det lettere å lese fargene og å se de forskjellige divene. Vi trenger denne rare clearfix -koden for å sikre at navigasjons- og innholdsdivsene våre (lagt til i neste trinn) ikke faller ut av div.

Trinn 4: Lag to divs i Content Div for navigasjon og faktisk innhold

Vi vil nå legge til ytterligere to divs i innholdsdiv. En for navigasjon og en for det faktiske innholdet. Mellom innholdstaggen; du legger til den nye koden:

Navigasjon Hovedinnhold Vi legger til litt css -kode for å vise navigasjons- og hovedinnhold divs; div#nav {bredde: 200px; flyte: venstre; bakgrunn: oransje;} div#maincontent {bredde: 600px; flyte: høyre; bakgrunn: rosa;} Legg merke til at disse to divene begge flyter. Hvis vi ikke hadde lagt inn den ekstra clearfix -koden i forrige trinn, ville divene flyte utenfor diven rundt. Med clearfix -metoden sørger vi for at det ikke skjer.

Trinn 5: Legg til noen ekstra div for struktur i navigasjon

Vi vil nå legge til noen ekstra divs til både "nav" div for å lage en slags struktur på nettsiden vår. Endre følgende bit kode:

  • Foo
  • Bar

Vi legger nå til et stykke kode for å definere hvordan div "navblock" må vises. Vær oppmerksom på at navblock har en klasse, ikke en id. Grunnen til dette er enkel; divs med en ID vises bare én gang (navigasjonsblokken, toppteksten, bunnteksten, …). Div med klasser kan vises mer enn én gang. Her bruker vi en klasse. Bare i tilfelle vi vil legge til en ny navigasjonsblokk senere on.div.navblock {bredde: 180px; margin: 5px auto; border: 1px solid red;} Hvis vi vil legge til en ny navigasjonsblokk, må du bare legge til en ny… struktur. Koden din vil nå se slik ut;

  • Foo
  • Bar
  • Boo
  • Langt

Trinn 6: Legg til noen ekstra div for struktur i hovedinnhold

Vi vil nå gjøre det samme for hovedinnholdet div. Koden ser nå slik ut:

Lorem ipsum dolor sit amet,…

Igjen legger vi til et stykke kode i vår css -fil for å finne ut hvordan div må vises: div.contentblock {bredde: 580px; margin: 5px auto; border: 1px solid white;} Vi kan nå legge til en ny innholdsblokk ved å legge til en annen "…" i maincontent div slik;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum, …

Trinn 7: Gjør nettstedet litt mindre stygt

Nå er den morsomme delen; Nå som vi har hoved div -strukturen, kan vi endre fargene til noe litt mindre kaotisk/stygg/… Bare lek med fargene i css -filen. Her er den komplette html -filen på nettsiden som vises i bildet: test

  • Foo
  • Bar
  • Boo
  • Langt

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum, …

Header Og dette er den komplette css -filen: body {bakgrunn: #444444; font-family: verdana, arial, sans-serif; farge: #444444; skriftstørrelse: 12px; margin: 0px;} div#container {bredde: 800px; margin: 0px auto; bakgrunn: #FFFFFF; polstring: 0px;} div#innhold {bredde: 800px; polstringstopp: 100px; bakgrunn: #FFFFFF;} div #header {bredde: 800px; høyde: 100px; bakgrunn: #888888; posisjon: absolutt; topp: 0px;} div#nav {bredde: 200px; flyte: venstre; bakgrunn: #FFFFFF;} div #maincontent {bredde: 600px; flyte: høyre; bakgrunn: #DDDDDD;} div.navblock {bredde: 180px; margin: 5px auto; kantlinje: 1px solid #DDDDDD;} div.contentblock {bredde: 580px; margin: 5px auto; border: 1px solid #FFFFFF;}. clearfix: etter {content: "."; display: blokk; høyde: 0; klart: begge; synlighet: skjult;}. clearfix {display: inline-block;}/* Skjul fra IE Mac \*/. clearfix {display: block;} Så nå har du det grunnleggende. Selvfølgelig er det fortsatt mye å redigere som farger, skriftstørrelser, en bedre navigasjonsblokk, … Men denne instruksen handler bare om div-strukturen. Hvis du vil se andre relaterte instrukser, kan du alltid spørre. Jeg skal se om jeg finner tiden.