Mycket grunderna för en Div-baserad webbplats: 7 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:48

Denna instruerbara kommer att visa dig grunderna för hur man bygger en webbplats med divs. Eftersom tabeller som används för layout är onda!: p För att förstå detta instruerbara måste du kunna grundläggande html och css. Om du inte förstår något, fråga gärna. Min personliga hemsida använder också denna typ av div -struktur. Http://www.erwtje.net Njut

Steg 1: Skapa de grundläggande filerna

Skapa först din html -fil. Vi lägger till det grundläggande. CSS -filen kommer att vara tom för now.html -filen innehåller nu: test Spara din HTML -fil som something.html. Du kan själv välja namnet. Din css -fil måste sparas som.css. Se till att du ger det samma namn som nämns i html -filen. I det här fallet "style.css". Vi har nu en vanlig tom html -sida när den förhandsgranskas i vår webbläsare.

Steg 2: Redigera brödmärket för grundläggande färger, teckensnitt, …

Vi lämnar html -filen som den är och redigerar endast css -filen. Lägg till följande kod i din css -fil: body {background: #444444; font-family: verdana, arial, sans-serif; färg: #444444; typsnitt: 12px; margin: 0px;} Med denna kodbit definierar vi alla egenskaper för kroppstaggen. Eftersom allt innehåll finns i body-taggen kommer dessa inställningar att påverka hela sidan. Bakgrunden och teckensnittsfärgen (färg) har ställts in på en mörkgrå. Teckensnittsfamiljen (font-family) har ställts in på verdana. Om datorn som används för att visa vår webbplats inte har teckensnittet "verdana", kommer den att visa vår webbplats med teckensnittet "arial". Du kan lägga till fler teckensnitt i listan. "Sans-serif" är den generiska typen som kommer att användas när inget teckensnitt du angav var tillgängligt. Teckensnittstorleken (teckenstorlek) har ställts in på 12 pixlar. Detta är ett absolut värde. Om du vill redigera andra teckenstorlekar (som rubriker, stycken, menyalternativ, …) kan du använda den relativa enheten "em" istället för "px". På det här sättet, om du vill ändra storlek på din webbplats, behöver du bara ändra kroppsteckensnittstorleken. Marginalen är inställd på 0px för alla fyra sidorna av kroppstaggen. Detta görs för att se till att webbplatsen kommer att hålla fast vid toppen av fönstret.

Steg 3: Lägga till en behållare med rubrik och innehåll

Vi lägger nu till behållaren. Detta är helt enkelt en centrerad div som kommer att innehålla hela vår webbplats. I den här behållaren lägger vi till ytterligare två divs; en content div och en header div. Vår html -fil kommer nu att se ut så här: test Content Header Vi lägger till följande kod i vår css -fil: div#container {width: 800px; marginal: 0px auto; bakgrund: #FFFFFF; vaddering: 0px;} div#innehåll {bredd: 800px; vadderingstopp: 100px; bakgrund: gul;} div#rubrik {bredd: 800px; höjd: 100px; bakgrund: blå; position: absolut; top: 0px;}. clearfix: efter {content: "."; display: block; höjd: 0; klart: båda; synlighet: dold;}. clearfix {display: inline-block;}/* Dölj från IE Mac \*/. clearfix {display: block;} div#container betyder att vi har en div-tagg med id "container". Vi lägger till några färger och en "marginal: 0px auto;" för att se till att vår behållare är centrerad på sidan. Vi måste ge innehållet en vadderingstopp och rubriken ett absolut värde med en "topp: 0px" för att se till att rubriken är placerad ovanför det andra innehållet. de fula färgerna. Det är bara för att göra det lättare att läsa färgerna och för att se de olika divs. Vi behöver den här konstiga clearfix -koden för att se till att våra navigations- och innehållsdivs (läggs till i nästa steg) inte faller ur den omgivande div.

Steg 4: Gör två Divs i Content Div för navigering och faktiskt innehåll

Vi lägger nu till ytterligare två divs i innehållsdiv. En för navigering och en för det faktiska innehållet. Mellan innehållstaggen; du lägger till den nya koden:

Navigering Huvudinnehåll Vi lägger till lite css -kod för att visa navigations- och huvudinnehåll divs; div#nav {width: 200px; flyta till vänster; bakgrund: orange;} div#maincontent {bredd: 600px; flyta: höger; bakgrund: rosa;} Observera att dessa två divs flyter båda. Om vi inte hade lagt den extra clearfix -koden i föregående steg, skulle divs flyta utanför den omgivande div. Med clearfix -metoden ser vi till att det inte händer.

Steg 5: Lägg till några extra div för struktur i navigering

Vi lägger nu till några extra divs till både "nav" div för att skapa någon form av struktur på vår webbsida. Ändra följande kodbit:

• Foo
• Bar

Vi kommer nu att annonsera en bit kod för att definiera hur div "navblock" måste visas. Observera att navblock har en klass, inte ett id. Anledningen till detta är enkel; div med ett id visas bara en gång (navigeringsblocket, sidhuvudet, sidfoten, …). Div med klasser kan visas mer än en gång. Här använder vi en klass. Bara om vi vill lägga till ett annat navigeringsblock senare on.div.navblock {bredd: 180px; marginal: 5px auto; border: 1px fast rött;} Om vi vill lägga till ytterligare ett navigeringsblock måste du bara lägga till en ny … struktur. Din kod kommer nu att se ut så här;

• Foo
• Bar
• Bua
• Långt

Steg 6: Lägg till några extra div för struktur i huvudinnehåll

Vi kommer nu att göra samma sak för maincontent div. Koden ser nu ut så här:

Lorem ipsum dolor sit amet, …

Återigen lägger vi till en bit kod i vår css -fil för att avgöra hur div måste visas: div.contentblock {width: 580px; marginal: 5px auto; border: 1px solid white;} Vi kan nu lägga till ytterligare ett innehållsblock genom att lägga till ytterligare "…" i maincontent div så här;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum, …

Steg 7: Gör webbplatsen lite mindre ful

Nu är det roliga; Nu när vi har den huvudsakliga div -strukturen kan vi ändra färgerna till något lite mindre kaotiskt/fult/… Bara leka med färgerna i css -filen. Här är den fullständiga html -filen på webbsidan som visas i bilden: test

• Foo
• Bar
• Bua
• Långt

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Header Och detta är den fullständiga css -filen: body {bakgrund: #444444; font-family: verdana, arial, sans-serif; färg: #444444; typsnitt: 12px; marginal: 0px;} div#behållare {bredd: 800px; marginal: 0px auto; bakgrund: #FFFFFF; vaddering: 0px;} div#innehåll {bredd: 800px; vadderingstopp: 100px; bakgrund: #FFFFFF;} div #header {bredd: 800px; höjd: 100px; bakgrund: #888888; position: absolut; överst: 0px;} div#nav {bredd: 200px; flyta till vänster; bakgrund: #FFFFFF;} div #maincontent {bredd: 600px; flyta: höger; bakgrund: #DDDDDD;} div.navblock {bredd: 180px; marginal: 5px auto; kant: 1px solid #DDDDDD;} div.contentblock {bredd: 580px; marginal: 5px auto; border: 1px solid #FFFFFF;}. clearfix: efter {content: "."; display: block; höjd: 0; klart: båda; synlighet: dold;}. clearfix {display: inline-block;}/* Dölj från IE Mac \*/. clearfix {display: block;} Så nu har du grunderna. Naturligtvis finns det fortfarande mycket att redigera som färger, teckensnittstorlekar, ett snyggare navigeringsblock, … Men denna instruktion handlar bara om div-strukturen. Om du vill se andra relaterade instruktioner kan du alltid fråga. Får se om jag hittar tid.