Div-põhise veebisaidi põhitõed: 7 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:51

See juhend annab teile põhitõdesid selle kohta, kuidas divs -iga veebisaiti luua. Sest paigutuseks kasutatavad tabelid on kurjad!: p Selle juhendi mõistmiseks peate teadma põhilisi html- ja css -dokumente. Kui te millestki aru ei saa, küsige julgelt. Minu isiklik koduleht kasutab ka sellist div -struktuuri.https://www.erwtje.net

Samm: looge põhifailid

Esmalt looge oma html -fail. Lisame sellele väga põhitõed. CSS -fail on praegu tühi. Html -fail sisaldab nüüd: test Salvestage oma html -fail kui midagi.html. Nime saate ise valida. Teie css -fail tuleb salvestada.css -failina. Pange sellele kindlasti sama nimi, nagu html -failis mainitud. Sel juhul "style.css". Meie brauseris eelvaates on nüüd tavaline tühi html -leht.

2. toiming: muutke põhivärvide, fontide ja…

Jätame html -faili sellisena, nagu see on, ja muudame ainult css -faili. Lisage oma css -failile järgmine kood: body {background: #444444; font-family: verdana, arial, sans-serif; värv: #444444; fondi suurus: 12 pikslit; margin: 0px;} Selle koodibiti abil määratleme kõik kehamärgendi omadused. Kuna kogu sisu on keha märgendis, mõjutavad need sätted kogu lehte. Taust ja fondivärv (värv) on määratud tumehalliks. Fondipere (font-family) on seatud verdana. Kui meie veebisaidi vaatamiseks kasutatud arvutil pole fonti "verdana", kuvatakse meie sait fondiga "arial". Loendisse saate lisada rohkem fonte. "Sans-serif" on üldtüüp, mida kasutatakse, kui teie pakutud font pole saadaval. Fondi suurus (fondisuurus) on seatud 12 pikslile. See on absoluutne väärtus. Kui soovite muuta muid fondisuurusi (nt päised, lõigud, menüüelemendid jne), võite kasutada "px" asemel suhtelist ühikut "em". Sel viisil, kui soovite oma veebisaidi suurust muuta, peate muutma ainult keha fondi suurust. Veeriseks on määratud kehapilt kõigi nelja külje jaoks 0 pikslit. Seda tehakse veendumaks, et sait jääb akna ülaosale.

Samm: päise ja sisuga konteineri lisamine

Nüüd lisame konteineri. See on lihtsalt tsentreeritud div, mis sisaldab kogu meie veebisaiti. Sellesse konteinerisse lisame veel kaks jaotist; sisu div ja päis div. Meie html -fail näeb nüüd välja selline: test Content Header Lisame oma css -faili järgmise koodi: div#container {width: 800px; veeris: 0 pikslit automaatne; taust: #FFFFFF; polster: 0px;} div#content {width: 800px; polsterdus: 100 pikslit; taust: kollane;} div#päis {laius: 800 pikslit; kõrgus: 100 pikslit; taust: sinine; positsioon: absoluutne; ülaosa: 0 pikslit;}. clearfix: pärast {content: "."; kuva: plokk; kõrgus: 0; selge: mõlemad; visibility: peidetud;}. clearfix {display: inline-block;}/* Peida IE Macis**/. clearfix {display: block;} div#container tähendab, et meil on div-silt ID-ga "container". Lisame mõned värvid ja veerise: 0px auto; veendumaks, et meie konteiner on lehel tsentreeritud. Peame andma sisule padding-top ja päise absoluutväärtuse "top: 0px", et veenduda, et päis on muu sisu kohal. koledad värvid. See on lihtsalt värvide lugemise ja erinevate divide nägemise hõlbustamiseks. Vajame seda kummalist selget paranduskoodi, et veenduda, et meie navigeerimine ja sisu jagamine (lisatud järgmises etapis) ei jää ümbritsevast divist välja.

4. samm: tehke navigeerimiseks ja tegelikuks sisuks kaks jaotist

Lisame nüüd veel kaks div divisjoni. Üks navigeerimiseks ja teine tegeliku sisu jaoks. Sisumärgendi vahel; lisate uue koodi:

Navigeerimine Põhisisu Lisame navigeerimise ja põhisisu divs kuvamiseks mõne css -koodi; div#nav {width: 200px; ujuk: vasak; taust: oranž;} div#maincontent {laius: 600 pikslit; ujuk: paremal; taust: roosa;} Pange tähele, et need kaks divit on mõlemad hõljuvad. Kui me poleks eelmises etapis lisanud selget paranduskoodi, hõljuksid divid ümbritsevast divist väljaspool. Selge paranduse meetodi abil tagame, et seda ei juhtuks.

5. samm: lisage navigeerimiseks struktuuri jaoks täiendavaid jaotisi

Nüüd lisame mõlemale "nav" div -ile täiendavaid div -sid, et luua oma veebisaidile mingisugune struktuur. Muutke järgmist bitti:

• Foo
• Baar

Nüüd reklaamime kooditüki, et määratleda, kuidas div "navblock" kuvatakse. Pange tähele, et navblockil on klass, mitte ID. Selle põhjus on lihtne; ID -ga div -sid kuvatakse ainult üks kord (navigeerimisplokk, päis, jalus jne). Klassidega divisid saab kuvada mitu korda. Siin kasutame klassi. Igaks juhuks tahame hiljem lisada teise navigeerimisploki.div.navblock {width: 180px; veerised: 5 pikslit automaatne; ääris: 1px punane;} Kui tahame lisada veel ühe navigeerimisploki, peate lihtsalt lisama uue… struktuuri. Teie kood näeb nüüd välja selline;

• Foo
• Baar
• Boo
• Kaugel

6. toiming: lisage põhisisu struktuuri jaoks täiendavaid jaotisi

Nüüd teeme sama ka põhisisu div. Kood näeb nüüd välja selline:

Lorem ipsum dolor sit amet,…

Jällegi lisame oma css -faili kooditüki, et määrata, kuidas div -i kuvada tuleb: div.contentblock {width: 580px; veerised: 5 pikslit automaatne; ääris: 1px valge valge;} Nüüd saame lisada teise sisuploki, lisades põhisisu div -i teise "…";

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Samm: muutke sait natuke vähem inetuks

Nüüd lõbus osa; värvid. Nüüd, kui meil on peamine div -struktuur, saame muuta värvid mõnevõrra vähem kaootiliseks/inetuks/… Lihtsalt mängige css -faili värvidega. Siin on pildil kuvatava veebilehe täielik html -fail: test

• Foo
• Baar
• Boo
• Kaugel

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Päis Ja see on täielik css -fail: body {background: #444444; font-family: verdana, arial, sans-serif; värv: #444444; fondi suurus: 12 pikslit; varu: 0px;} div#konteiner {laius: 800px; veeris: 0 pikslit automaatne; taust: #FFFFFF; polster: 0px;} div#content {width: 800px; polsterdus: 100 pikslit; taust: #FFFFFF;} div #päis {laius: 800 pikslit; kõrgus: 100 pikslit; taust: #888888; positsioon: absoluutne; ülaosa: 0 pikslit;} div#nav {laius: 200 pikslit; ujuk: vasak; taust: #FFFFFF;} div #maincontent {laius: 600 pikslit; ujuk: paremal; taust: #DDDDDD;} div.navblock {laius: 180px; veerised: 5 pikslit automaatne; ääris: 1px tahke #DDDDDD;} div.contentblock {laius: 580px; veerised: 5 pikslit automaatne; ääris: 1px tahke #FFFFFF;}. clearfix: pärast {content: "."; kuva: plokk; kõrgus: 0; selge: mõlemad; visibility: peidetud;}. clearfix {display: inline-block;}/* Peida IE Maci eest \*/. clearfix {display: block;} Nüüd on teil põhitõed. Muidugi on veel palju muuta, näiteks värve, fondisuurust, parema väljanägemisega navigeerimisplokki… Aga see juhend sisaldab ainult div-struktuuri. Kui soovite näha muid seotud juhiseid, võite alati küsida. Vaatan, kas leian aega.