Die basiese beginsels van 'n div-gebaseerde webwerf: 7 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:28

Hierdie instruksies wys u die basiese beginsels van hoe u 'n webwerf met divs kan bou. Omdat tafels wat vir uitleg gebruik word, boos is!: p Om hierdie instruksies te verstaan, moet u basiese html en css ken. As u iets nie verstaan nie, vra dit gerus. My persoonlike tuisblad gebruik ook hierdie soort div -struktuur.https://www.erwtje.net Geniet

Stap 1: Skep die basiese lêers

Skep eers u html -lêer. Ons sal die basiese beginsels daarby voeg. Die css -lêer sal vir nou leeg wees. Html -lêer bevat nou: toets Stoor u html -lêer as iets.html. U kan self die naam kies. U css -lêer moet gestoor word as.css. Maak seker dat u dieselfde naam gee as wat in die html -lêer genoem word. In hierdie geval "style.css". Ons het nou 'n gewone leë html -bladsy as dit in ons blaaier voorbeskou word.

Stap 2: Wysig die liggaamsmerk vir basiese kleure, lettertipes, …

Ons laat die html -lêer soos dit is en wysig slegs die css -lêer. Voeg die volgende kode by u css -lêer: body {background: #444444; font-familie: verdana, arial, sans-serif; kleur: #444444; lettergrootte: 12 px; marge: 0px;} Met hierdie stukkie kode definieer ons al die eienskappe van die body tag. Aangesien al die inhoud in die body-tag is, beïnvloed hierdie instellings die hele bladsy. Die agtergrond en lettertipe kleur (kleur) is op 'n donker grys gestel. Die lettertypefamilie (font-familie) is op verdana gestel. As die rekenaar wat ons gebruik om ons webwerf te sien nie die lettertipe "verdana" het nie, sal dit ons webwerf met die lettertipe "arial" vertoon. U kan meer lettertipes by die lys voeg. Die "sans-serif" is die generiese tipe wat gebruik sal word indien geen lettertipe wat u verskaf het beskikbaar was nie. Die lettergrootte (lettergrootte) is op 12 pixels gestel. Dit is 'n absolute waarde. As u ander lettergroottes wil wysig (soos die opskrifte, paragrawe, menu-items, …), kan u die relatiewe eenheid "em" gebruik in plaas van "px". As u die grootte van u webwerf wil verander, hoef u slegs die lettergrootte van die liggaam te verander. Dit word gedoen om seker te maak dat die webwerf bo -aan die venster sal plak.

Stap 3: Voeg 'n houer by met kop en inhoud

Ons sal nou die houer byvoeg. Dit is eenvoudig 'n gesentreerde div wat ons hele webwerf sal bevat. In hierdie houer voeg ons nog twee divs by; 'n inhoud div en 'n kop kop div. Ons html lêer sal nou so lyk: toets Content Header Ons sal die volgende kode by ons css lêer voeg: div#container {width: 800px; marge: 0px outomaties; agtergrond: #FFFFFF; opvulling: 0px;} div#inhoud {breedte: 800px; opvulling: 100 px; agtergrond: geel;} div#kop {breedte: 800px; hoogte: 100 px; agtergrond: blou; posisie: absoluut; top: 0px;}. clearfix: na {inhoud: "."; vertoon: blok; hoogte: 0; duidelik: beide; sigbaarheid: verborge;}. clearfix {display: inline-block;}/* Versteek van IE Mac \*/. clearfix {display: block;} div#houer beteken dat ons 'n div-tag met id "houer" het. Ons voeg 'n paar kleure by en 'n "marge: 0px auto;" om seker te maak dat ons houer in die middel van die bladsy is. Ons moet die inhoud 'n opvulling gee en die kop 'n absolute waarde met 'n "top: 0px" om seker te maak dat die kop bo die ander inhoud is. die lelike kleure. Dit is net om dit makliker te maak om die kleure te lees en die verskillende afdelings te sien. Ons benodig hierdie vreemde clearfix -kode om seker te maak dat ons navigasie- en inhoudsafdelings (bygevoeg in die volgende stap) nie uit die omliggende div val nie.

Stap 4: Maak twee afdelings in die inhoudsafdeling vir navigasie en werklike inhoud

Ons voeg nou nog twee afdelings by die inhoudsafdeling. Een vir navigasie en een vir die werklike inhoud. Tussen die inhoud-tag; jy sal die nuwe kode byvoeg:

Navigasie Hoofinhoud Ons sal 'n paar css -kode byvoeg om die navigasie en hoofinhoud divs; div#nav {width: 200px; dryf: links; agtergrond: oranje;} div#hoofinhoud {breedte: 600px; dryf: regs; agtergrond: pienk;} Let op die feit dat hierdie twee afdelings albei dryf. As ons nie die ekstra clearfix -kode in die vorige stap geplaas het nie, sou die divs buite die omliggende div sweef. Met die clearfix -metode sorg ons dat dit nie gebeur nie.

Stap 5: Voeg 'n paar ekstra afdelings by vir struktuur in navigasie

Ons sal nou 'n paar ekstra divs by beide die "nav" div voeg om 'n soort struktuur op ons webblad te skep. Verander die volgende stukkie kode:

• Foo
• Kroeg

Ons sal nou 'n stuk kode adverteer om te definieer hoe die div "navblock" vertoon moet word. Let daarop dat die navblock 'n klas het, nie 'n id nie. Die rede hiervoor is eenvoudig; divs met 'n ID word slegs een keer vertoon (die navigasieblok, kop, voetskrif, …). Divs met klasse kan meer as een keer vertoon word. Hier gebruik ons 'n klas. Vir ingeval ons later 'n ander navigasieblok wil byvoeg.div.navblock {width: 180px; marge: 5px outomaties; border: 1px soliede rooi;} As ons nog 'n blok navigasie wil byvoeg, moet u net 'n nuwe… struktuur byvoeg. U kode sal nou so lyk;

• Foo
• Kroeg
• Boe
• Ver

Stap 6: Voeg 'n paar ekstra afdelings by vir die struktuur in die hoofinhoud

Ons sal nou dieselfde doen vir die hoofinhoud div. Die kode lyk nou so:

Lorem ipsum dolor sit amet, …

Weer sal ons 'n stuk kode by ons css -lêer voeg om te bepaal hoe die div vertoon moet word: div.contentblock {width: 580px; marge: 5px outomaties; border: 1px soliede wit;} Ons kan nou nog 'n blok inhoud byvoeg deur 'n ander "…" in die hoofinhoud -afdeling soos volg by te voeg;

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Stap 7: Maak die webwerf 'n bietjie minder lelik

Nou die lekker deel; Noudat ons die belangrikste div -struktuur het, kan ons die kleure verander na iets minder chaoties/lelik/… Speel net met die kleure in die css -lêer. Hier is die volledige html -lêer van die webblad wat in die prentjie vertoon word: toets

• Foo
• Kroeg
• Boe
• Ver

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Header En dit is die volledige css -lêer: body {background: #444444; font-familie: verdana, arial, sans-serif; kleur: #444444; lettergrootte: 12 px; marge: 0px;} div#houer {breedte: 800px; marge: 0px outomaties; agtergrond: #FFFFFF; opvulling: 0px;} div#inhoud {breedte: 800px; opvulling: 100 px; agtergrond: #FFFFFF;} div #kop {breedte: 800px; hoogte: 100 px; agtergrond: #888888; posisie: absoluut; bo: 0px;} div#nav {breedte: 200px; dryf: links; agtergrond: #FFFFFF;} div #hoofinhoud {breedte: 600px; dryf: regs; agtergrond: #DDDDDD;} div.navblock {breedte: 180px; marge: 5px outomaties; grens: 1px soliede #DDDDDD;} div.contentblock {breedte: 580px; marge: 5px outomaties; grens: 1px soliede #FFFFFF;}. clearfix: na {inhoud: "."; vertoon: blok; hoogte: 0; duidelik: beide; sigbaarheid: verborge;}. clearfix {display: inline-block;}/* Versteek van IE Mac \*/. clearfix {display: block;} Nou het u die basiese beginsels. Natuurlik is daar nog baie om te wysig, soos kleure, lettergroottes, 'n beter navigasieblok … Maar hierdie instruksies handel slegs oor die div-struktuur. As u ander verwante instruksies wil sien, kan u dit altyd vra. Ek sal kyk of ek die tyd kan kry.