Meget grundlæggende for et div-baseret websted: 7 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:31

Denne instruktive vil vise dig det grundlæggende i, hvordan du bygger et websted med divs. Fordi tabeller, der bruges til layout, er onde!: pFor at forstå dette instruerbare skal du kende grundlæggende html og css. Hvis du ikke forstår noget, er du velkommen til at spørge. Min personlige hjemmeside bruger også denne form for div -struktur. Http://www.erwtje.net Nyd

Trin 1: Opret de grundlæggende filer

Opret først din html -fil. Vi tilføjer det grundlæggende til det. CSS -filen vil være tom for now.html -filen indeholder nu: test Gem din html -fil som something.html. Du kan selv vælge navnet. Din css -fil skal gemmes som.css. Sørg for at give det samme navn som nævnt i html -filen. I dette tilfælde "style.css". Vi har nu en almindelig tom html -side, når den er vist i vores browser.

Trin 2: Rediger brødteksten for grundlæggende farver, skrifttyper, …

Vi lader html -filen være, som den er, og redigerer kun css -filen. Tilføj følgende kode til din css -fil: body {background: #444444; font-familie: verdana, arial, sans-serif; farve: #444444; skrifttype: 12px; margin: 0px;} Med denne bit kode definerer vi alle egenskaberne for brødteksten. Da alt indhold er i brødteksten, vil disse indstillinger påvirke hele siden. Baggrunden og skrifttypefarven (farve) er blevet indstillet til en mørkegrå. Fontfamilien (skrifttype-familie) er blevet sat til verdana. Hvis computeren, der bruges til visning af vores websted, ikke har skrifttypen "verdana", viser den vores websted med skrifttypen "arial". Du kan tilføje flere skrifttyper til listen. "Sans-serif" er den generiske type, der vil blive brugt, når ingen skrifttype du har angivet var tilgængelig. Skriftstørrelsen (skrifttype) er blevet indstillet til 12 pixels. Dette er en absolut værdi. Hvis du vil redigere andre skriftstørrelser (f.eks. Overskrifter, afsnit, menupunkter, …) kan du bruge den relative enhed "em" i stedet for "px". På denne måde, hvis du vil ændre størrelsen på dit websted, skal du kun ændre kropstypestørrelsen. Margenen er sat til 0px for alle fire sider af body -tagget. Dette gøres for at sikre, at webstedet holder sig til toppen af vinduet.

Trin 3: Tilføjelse af en beholder med overskrift og indhold

Vi tilføjer nu beholderen. Dette er simpelthen en centreret div, der vil indeholde hele vores websted. I denne container tilføjer vi to divs mere; en indholds div og en overskrift div. Vores html -fil vil nu se sådan ud: test indholdsoverskrift Vi tilføjer følgende kode til vores css -fil: div#container {width: 800px; margen: 0px auto; baggrund: #FFFFFF; polstring: 0px;} div#indhold {bredde: 800px; polstringstop: 100px; baggrund: gul;} div#header {bredde: 800px; højde: 100px; baggrund: blå; position: absolut; top: 0px;}. clearfix: efter {indhold: "."; display: blok; højde: 0; klart: begge; synlighed: skjult;}. clearfix {display: inline-block;}/* Skjul fra IE Mac \*/. clearfix {display: block;} div#container betyder, at vi har et div-tag med id "container". Vi tilføjer nogle farver og en "margin: 0px auto;" for at sikre, at vores beholder er centreret på siden. Vi skal give indholdet en polstringstop og overskriften en absolut værdi med en "top: 0px" for at sikre, at overskriften er placeret over det andet indhold. de grimme farver. Det er bare for at gøre det lettere at læse farverne og for at se de forskellige div. Vi skal bruge denne underlige clearfix -kode for at sikre, at vores navigations- og indholdsdivs (tilføjet i næste trin) ikke falder ud af den omgivende div.

Trin 4: Lav to divs i indholdsdivisionen til navigation og faktisk indhold

Vi tilføjer nu yderligere to divs i indholdsdiv. En til navigation og en til det faktiske indhold. Mellem indholdsmærket; du tilføjer den nye kode:

Navigation Hovedindhold Vi tilføjer noget css -kode til visning af navigation og hovedindhold divs; div#nav {bredde: 200px; flyde: venstre; baggrund: orange;} div#maincontent {bredde: 600px; flyde: højre; baggrund: pink;} Bemærk, at disse to divs begge flyder. Hvis vi ikke havde lagt den ekstra clearfix -kode i det foregående trin, ville divs flyde uden for den omkringliggende div. Med clearfix -metoden sørger vi for, at det ikke sker.

Trin 5: Tilføj nogle ekstra divs til struktur i navigation

Vi tilføjer nu nogle ekstra divs til både "nav" div for at skabe en form for struktur på vores webside. Skift følgende bit kode:

• Foo
• Bar

Vi vil nu annoncere et stykke kode for at definere, hvordan div "navblock" skal vises. Bemærk, at navblock har en klasse, ikke et id. Grunden til dette er enkel; divs med et id vises kun én gang (navigationsblokken, sidehovedet, sidefoden, …). Divs med klasser kan vises mere end én gang. Her vil vi bruge en klasse. Bare hvis vi vil tilføje endnu en navigationsblok senere.div.navblock {bredde: 180px; margen: 5px auto; border: 1px solid red;} Hvis vi vil tilføje endnu en navigationsblok, skal du bare tilføje en ny… struktur. Din kode vil nu se sådan ud;

• Foo
• Bar
• Boo
• Langt

Trin 6: Tilføj nogle ekstra divs til struktur i hovedindhold

Vi gør nu det samme for maincontent div. Koden ser nu sådan ud:

Lorem ipsum dolor sit amet,…

Igen tilføjer vi et stykke kode til vores css -fil for at bestemme, hvordan div skal vises: div.contentblock {bredde: 580px; margen: 5px auto; border: 1px solid white;} Vi kan nu tilføje endnu en blok af indhold ved at tilføje endnu en "…" i maincontent div som denne;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum, …

Trin 7: Gør webstedet lidt mindre grimt

Nu den sjove del; Nu hvor vi har den primære div -struktur, kan vi ændre farverne til noget lidt mindre kaotisk/grimt/… Bare leg med farverne i css -filen. Her er den komplette html -fil på websiden, der vises på billedet: test

• Foo
• Bar
• Boo
• Langt

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum, …

Header Og dette er den komplette css -fil: body {baggrund: #444444; font-familie: verdana, arial, sans-serif; farve: #444444; skrifttype: 12px; margin: 0px;} div#container {bredde: 800px; margen: 0px auto; baggrund: #FFFFFF; polstring: 0px;} div#indhold {bredde: 800px; polstringstop: 100px; baggrund: #FFFFFF;} div #header {bredde: 800px; højde: 100px; baggrund: #888888; position: absolut; top: 0px;} div#nav {bredde: 200px; flyde: venstre; baggrund: #FFFFFF;} div #maincontent {bredde: 600px; flyde: højre; baggrund: #DDDDDD;} div.navblock {bredde: 180px; margen: 5px auto; kant: 1px solid #DDDDDD;} div.contentblock {bredde: 580px; margen: 5px auto; border: 1px solid #FFFFFF;}. clearfix: efter {indhold: "."; display: blok; højde: 0; klart: begge; synlighed: skjult;}. clearfix {display: inline-block;}/* Skjul fra IE Mac \*/. clearfix {display: block;} Så nu har du det grundlæggende. Selvfølgelig er der stadig meget at redigere som farver, skrifttypestørrelser, en flottere navigationsblok, … Men denne instruktion handler kun om div-strukturen. Hvis du gerne vil se andre relaterede instruktioner, kan du altid spørge. Jeg skal se om jeg kan finde tiden.