Zelo osnove spletnega mesta, ki temelji na Div: 7 korakov

2025 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2025-01-13 06:58

Ta navodila vam bodo pokazala same osnove, kako zgraditi spletno mesto z divi. Ker so mize, ki se uporabljajo za postavitev, hudobne!: p Če želite razumeti ta navodila, morate poznati osnovne html in css. Če česa ne razumete, vas prosimo, da vprašate. Moja osebna domača stran uporablja tudi tovrstno strukturo div.https://www.erwtje.net

1. korak: Ustvarite osnovne datoteke

Najprej ustvarite html datoteko. Dodali bomo zelo osnove. Datoteka css bo za zdaj prazna. Datoteka zdaj vsebuje: test Shrani datoteko html kot something.html. Ime lahko izberete sami. Datoteko css morate shraniti kot.css. Dajte mu enako ime, kot je omenjeno v datoteki html. V tem primeru "style.css". Pred predogledom v brskalniku imamo zdaj navadno prazno stran html.

2. korak: Uredite oznako telesa za osnovne barve, pisave,…

Datoteko html bomo pustili takšno, kot je, in uredili samo datoteko css. V datoteko css dodajte naslednjo kodo: body {background: #444444; družina pisav: verdana, arial, sans-serif; barva: #444444; velikost pisave: 12px; margin: 0px;} S tem kodom kode bomo definirali vse lastnosti oznake body. Ker je vsa vsebina v oznaki body, bodo te nastavitve vplivale na celotno stran. Ozadje in barva pisave (barva) sta nastavljeni na temno sivo. Družina pisav (font-family) je nastavljena na verdana. Če računalnik, uporabljen za ogled naše spletne strani, nima pisave "verdana", bo našo stran prikazal v pisavi "arial". Na seznam lahko dodate več pisav. "Sans-serif" je generična vrsta, ki se bo uporabljala, če ni na voljo nobene pisave. Velikost pisave (velikost pisave) je nastavljena na 12 slikovnih pik. To je absolutna vrednost. Če želite urediti druge velikosti pisav (na primer glave, odstavke, elemente menija …), lahko namesto "px" uporabite relativno enoto "em". Na ta način, če želite spremeniti velikost svojega spletnega mesta, boste morali spremeniti samo velikost pisave telesa. Rob je nastavljen na 0 slikovnih pik za vse štiri strani oznake telesa. To se naredi za zagotovitev, da se mesto prilepi na vrh okna.

3. korak: Dodajanje vsebnika z glavo in vsebino

Zdaj bomo dodali posodo. To je preprosto centriran div, ki bo vseboval naše celotno spletno mesto. V tem vsebniku bomo dodali še dva divja; div vsebine in naslov div. Naša html datoteka bo zdaj videti tako: test Content Header V našo datoteko css bomo dodali naslednjo kodo: div#container {width: 800px; rob: 0px samodejno; ozadje: #FFFFFF; padding: 0px;} div#vsebina {width: 800px; oblazinjenje: 100px; ozadje: rumeno;} div#header {width: 800px; višina: 100px; ozadje: modro; položaj: absolutno; top: 0px;}. clearfix: after {vsebina: "."; prikaz: blok; višina: 0; jasno: oboje; visibility: hidden;}. clearfix {display: inline-block;}/* Skrij iz IE Mac \*/. clearfix {display: block;} div#container pomeni, da imamo oznako div z id "vsebnik". Dodali bomo nekaj barv in "margin: 0px auto;" da se prepričamo, da je naš vsebnik na sredini na strani. Vsebini moramo dati oblazinjeni vrh in glavi absolutno vrednost z "top: 0px", da se prepričamo, da je glava postavljena nad drugo vsebino. grde barve. To je samo zato, da olajšamo branje barv in ogled različnih divov. Potrebovali bomo to čudno kodo clearfix, da zagotovimo, da naši navigacijski in vsebinski divi (dodani v naslednjem koraku) ne bodo padli iz okolice div.

4. korak: Naredite dva prestopa v vsebinskem razdelku za navigacijo in dejansko vsebino

Zdaj bomo v vsebinski div dodali še dva divja. Ena za navigacijo in ena za dejansko vsebino. Vmes med oznako vsebine; dodali boste novo kodo:

Navigacija Glavna vsebina Dodali bomo nekaj kode css za prikaz navigacijskih in glavnih vsebin; div#nav {width: 200px; float: levo; ozadje: oranžno;} div#maincontent {width: 600px; float: desno; ozadje: roza;} Upoštevajte dejstvo, da oba diva lebdita. Če v prejšnjem koraku ne bi dodali dodatne kode clearfix, bi divi plavali zunaj okolice div. Z metodo clearfix bomo poskrbeli, da se to ne zgodi.

5. korak: Dodajte nekaj dodatnih div za strukturo v navigaciji

Zdaj bomo v razdelek "nav" dodali nekaj dodatnih div, da bi ustvarili nekakšno strukturo na naši spletni strani. Spremenite naslednji del kode:

• Foo
• Bar

Zdaj bomo objavili del kode, ki bo določil, kako naj se prikaže "navblock" div. Upoštevajte, da ima navblock razred, ne ID. Razlog za to je preprost; divi z ID -jem so prikazani samo enkrat (navigacijski blok, glava, noga …). Divi s razredi se lahko prikažejo večkrat. Tukaj bomo uporabili razred. V primeru, da bomo pozneje na.div.navblock {width: 180px; rob: 5px samodejno; border: 1px solid red;} Če želimo dodati še en blok za krmarjenje, boste morali dodati novo … strukturo. Vaša koda bo zdaj videti tako;

• Foo
• Bar
• Boo
• Daleč

6. korak: Dodajte nekaj dodatnih razlik za strukturo v glavno vsebino

Zdaj bomo storili enako za div maincontent. Koda je zdaj videti tako:

Lorem ipsum dolor sit amet,…

Ponovno bomo v datoteko css dodali del kode, da ugotovimo, kako naj bo div prikazan: div.contentblock {width: 580px; rob: 5px samodejno; border: 1px solid white;} Zdaj lahko dodamo še en blok vsebine, tako da v glavni naslov vsebine, kot je ta, dodamo še en "…";

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

7. korak: Naredite spletno mesto nekoliko manj grdo

Zdaj zabavni del; barve. Zdaj, ko imamo glavno strukturo div, lahko barve spremenimo v nekaj manj kaotičnega/grdega/… Samo poigrajte se z barvami v datoteki css. Tukaj je celotna html datoteka spletne strani, prikazana na sliki: test

• Foo
• Bar
• Boo
• Daleč

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Header In to je celotna datoteka css: body {background: #444444; družina pisav: verdana, arial, sans-serif; barva: #444444; velikost pisave: 12px; rob: 0px;} div#vsebnik {width: 800px; rob: 0px samodejno; ozadje: #FFFFFF; padding: 0px;} div#vsebina {width: 800px; oblazinjenje: 100px; ozadje: #FFFFFF;} div #header {width: 800px; višina: 100px; ozadje: #888888; položaj: absolutno; top: 0px;} div#nav {width: 200px; float: levo; ozadje: #FFFFFF;} div #maincontent {width: 600px; float: desno; ozadje: #DDDDDD;} div.navblock {width: 180px; rob: 5px samodejno; rob: 1px trdno #DDDDDD;} div.contentblock {width: 580px; rob: 5px samodejno; rob: 1px trdno #FFFFFF;}. clearfix: after {vsebina: "."; prikaz: blok; višina: 0; jasno: oboje; visibility: hidden;}. clearfix {display: inline-block;}/* Skrij iz IE Mac \*/. clearfix {display: block;} Zdaj imate osnove. Seveda je treba še veliko urejati, kot so barve, velikosti pisav, lepši navigacijski blok … Toda ta navodila vsebujejo le strukturo div. Če želite videti druge sorodne napotke, lahko vedno vprašate. Bom videl, če bom našel čas.