Div-pohjaisen verkkosivuston perusteet: 7 vaihetta

2025 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2025-01-13 06:57

Tämä ohje antaa sinulle perusasiat siitä, kuinka rakentaa verkkosivusto divs: n avulla. Koska taulukoissa käytetyt taulukot ovat pahoja!: pJos haluat ymmärtää tämän ohjeen, sinun on tunnettava html- ja css -perusasetukset. Jos et ymmärrä jotain, kysy rohkeasti. Oma kotisivuni käyttää myös tällaista div -rakennetta.

Vaihe 1: Luo perustiedostot

Luo ensin html -tiedostosi. Lisäämme siihen perusasiat. Css -tiedosto on toistaiseksi tyhjä. Html -tiedosto sisältää nyt: test Tallenna html -tiedostosi jotain.html -tiedostona. Voit valita nimen itse. CSS -tiedostosi on tallennettava.css -tiedostona. Varmista, että annat sille saman nimen kuin html -tiedostossa. Tässä tapauksessa "style.css". Meillä on nyt tavallinen tyhjä html -sivu, kun se esikatsellaan selaimessamme.

Vaihe 2: Muokkaa perusvärejä, fontteja,…

Jätämme html -tiedoston sellaisenaan ja muokkaamme vain css -tiedostoa. Lisää seuraava koodi css -tiedostoosi: body {background: #444444; fonttiperhe: verdana, arial, sans-serif; väri: #444444; fontin koko: 12px; marginaali: 0px;} Tällä bitti koodilla määritämme kaikki body -tunnisteen ominaisuudet. Koska kaikki sisältö on body-tunnisteessa, nämä asetukset vaikuttavat koko sivuun. Tausta ja kirjasinväri (väri) on asetettu tumman harmaaksi. Jos verkkosivustomme katseluun käytetyssä tietokoneessa ei ole kirjasinta "verdana", se näyttää sivustomme fontilla "arial". Voit lisätä luetteloon lisää fontteja. "Sans-serif" on yleinen tyyppi, jota käytetään, jos antamaasi fonttia ei ollut saatavilla. Fonttikoko (font-size) on asetettu 12 pikseliin. Tämä on ehdoton arvo. Jos haluat muokata muita kirjasinkokoja (kuten otsikoita, kappaleita, valikkokohteita jne.), Voit käyttää suhteellista yksikköä "em" "px" sijasta. Jos haluat muuttaa verkkosivustosi kokoa, sinun on vain muutettava tekstin fonttikokoa. Marginaaliksi on asetettu 0 kuvapistettä body -tagin kaikilla neljällä puolella. Näin varmistetaan, että sivusto tarttuu ikkunan yläosaan.

Vaihe 3: Säiliön lisääminen otsikon ja sisällön kanssa

Lisäämme nyt säiliön. Tämä on yksinkertaisesti keskitetty div, joka sisältää koko verkkosivustomme. Tässä säilössä lisäämme kaksi muuta divia; content div ja header div. Html -tiedostomme näyttää nyt tältä: test Content Header Lisäämme css -tiedostoomme seuraavan koodin: div#container {width: 800px; marginaali: 0px auto; tausta: #FFFFFF; pehmuste: 0px;} div#content {width: 800px; toppaus: 100px; tausta: keltainen;} div#header {width: 800px; korkeus: 100 pikseliä; tausta: sininen; sijainti: absoluuttinen; alkuun: 0px;}. clearfix: {content: "." jälkeen; näyttö: lohko; korkeus: 0; Tyhjennä molemmat; visibility: hidden;}. clearfix {display: inline-block;}/* Piilota IE Macista**/. clearfix {display: block;} div#container tarkoittaa, että meillä on div-tunniste, jonka tunnus on "container". Lisäämme värejä ja "marginaali: 0px auto;" varmistaaksemme, että säilö on keskellä sivua. Meidän on annettava sisällölle pehmuste ja ylätunnisteelle absoluuttinen arvo ja "top: 0px" varmistaaksemme, että otsikko on muun sisällön yläpuolella. rumia värejä. Värien lukemisen ja eri divien näkemisen helpottamiseksi tarvitsemme tätä outoa selkeää korjauskoodia varmistaaksemme, että navigointi- ja sisältösukelluksemme (lisätty seuraavassa vaiheessa) eivät putoa ympäröivästä divista.

Vaihe 4: Tee kaksi divisioona sisällön osastossa navigointia ja todellista sisältöä varten

Lisäämme nyt kaksi muuta divia sisältöosastoon. Yksi navigointiin ja toinen varsinaiseen sisältöön. Sisältötunnisteen välissä; lisäät uuden koodin:

Navigointi Pääsisältö Lisäämme css -koodin näyttämään navigointi- ja pääsisällön div; div#nav {width: 200px; kellua: vasen; tausta: oranssi;} div#maincontent {width: 600px; kellua: oikea; tausta: vaaleanpunainen;} Huomaa, että nämä kaksi divia ovat kelluvia. Jos emme olisi laittaneet ylimääräistä clearfix -koodia edelliseen vaiheeseen, divit kelluvat ympäröivän divin ulkopuolella. Clearfix -menetelmällä varmistamme, että näin ei tapahdu.

Vaihe 5: Lisää joitakin ylimääräisiä osioita navigoinnin rakenteelle

Lisäämme nyt ylimääräisiä sukelluksia molempiin "nav" -diviin, jotta voimme luoda jonkinlaisen rakenteen verkkosivullemme. Muuta seuraava bitti koodia:

• Foo
• Baari

Mainostamme nyt koodin, jolla määritetään, miten div "navblock" on näytettävä. Huomaa, että navblockilla on luokka, ei tunnus. Syy tähän on yksinkertainen; divit, joilla on tunnus, näytetään vain kerran (navigointilohko, otsikko, alatunniste jne.). Luokat sisältävät divit voidaan näyttää useammin kuin kerran. Tässä käytetään luokkaa. Jos haluamme lisätä myöhemmin toisen navigointilohkon.div.navblock {width: 180px; marginaali: 5px auto; reunus: 1px kiinteä punainen;} Jos haluamme lisätä uuden navigointilohkon, sinun on vain lisättävä uusi… rakenne. Koodisi näyttää nyt tältä;

• Foo
• Baari
• Boo
• Kaukana

Vaihe 6: Lisää joitain ylimääräisiä div -tiedostoja pääsisällön rakenteelle

Teemme nyt samoin maincontent div: lle, koodi näyttää nyt tältä:

Lorem ipsum dolor sit amet,…

Lisäämme jälleen koodin CSS -tiedostoomme määrittääksemme, miten div on näytettävä: div.contentblock {width: 580px; marginaali: 5px auto; reunus: 1px kiinteä valkoinen;} Voimme nyt lisätä toisen sisältölohkon lisäämällä toisen "…" maincontent div -laitteeseen näin;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Vaihe 7: Tee sivustosta hieman vähemmän ruma

Nyt hauska osa; värit. Nyt kun meillä on päärakenne, voimme muuttaa värit hieman kaoottisemmaksi/rumaksi/… Pelaa vain css -tiedoston väreillä. Tässä on kuvassa näkyvän verkkosivun täydellinen html -tiedosto: testi

• Foo
• Baari
• Boo
• Kaukana

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Otsikko Ja tämä on täydellinen css -tiedosto: body {background: #444444; fonttiperhe: verdana, arial, sans-serif; väri: #444444; fontin koko: 12px; marginaali: 0px;} div#container {width: 800px; marginaali: 0px auto; tausta: #FFFFFF; pehmuste: 0px;} div#content {width: 800px; toppaus: 100px; tausta: #FFFFFF;} div #header {width: 800px; korkeus: 100 pikseliä; tausta: #888888; sijainti: absoluuttinen; alkuun: 0px;} div#nav {leveys: 200px; kellua: vasen; tausta: #FFFFFF;} div #maincontent {width: 600px; kellua: oikea; tausta: #DDDDDD;} div.navblock {width: 180px; marginaali: 5px auto; reunus: 1px kiinteä #DDDDDD;} div.contentblock {leveys: 580px; marginaali: 5px auto; reunus: 1px kiinteä #FFFFFF;}. clearfix: {content: "." jälkeen; näyttö: lohko; korkeus: 0; Tyhjennä molemmat; visibility: hidden;}. clearfix {display: inline-block;}/* Piilota IE Macista**/. clearfix {display: block;} Nyt sinulla on perusasiat. Tietenkin on vielä paljon muokattavaa, kuten värejä, kirjasinkokoja, paremman näköinen navigointilohko … Mutta tämä ohje sisältää vain div-rakenteen. Jos haluat nähdä muita aiheeseen liittyviä ohjeita, voit aina kysyä. Saa nähdä löydänkö ajan.