„Div“pagrindu sukurtos svetainės pagrindai: 7 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:51

Ši pamoka parodys pagrindus, kaip sukurti svetainę naudojant „divs“. Kadangi išdėstymui naudojamos lentelės yra blogis!: p Kad suprastumėte tai, ką galite pamokyti, turite žinoti pagrindinius html ir css. Jei kažko nesuprantate, nedvejodami paklauskite. Mano asmeniniame puslapyje taip pat naudojama tokia div struktūra.

1 žingsnis: sukurkite pagrindinius failus

Pirmiausia sukurkite savo html failą. Prie jo pridėsime pačius pagrindus. Css failas kol kas bus tuščias. Html faile dabar yra: test Išsaugokite savo HTML failą kaip kažką.html. Pavadinimą galite pasirinkti patys. Jūsų css failas turi būti išsaugotas kaip.css. Būtinai suteikite jam tą patį pavadinimą, kaip nurodyta html faile. Šiuo atveju „style.css“. Dabar, kai peržiūrime naršyklėje, turime paprastą tuščią HTML puslapį.

2 veiksmas: redaguokite pagrindines spalvas, šriftus, etiketę…

Mes paliksime html failą tokį, koks jis yra, ir redaguosime tik css failą. Pridėkite šį kodą prie savo css failo: body {background: #444444; šriftų šeima: verdana, arial, sans-serif; spalva: #444444; šrifto dydis: 12 pikselių; paraštė: 0px;} Naudodami šį kodo bitą apibrėžsime visas kūno žymos savybes. Kadangi visas turinys yra kūno žymoje, šie nustatymai paveiks visą puslapį. Fonas ir šrifto spalva (spalva) buvo nustatyti tamsiai pilki. Šriftų šeima (šriftų šeima) nustatyta kaip verdana. Jei kompiuteryje, naudojamame mūsų svetainei peržiūrėti, nėra šrifto „verdana“, mūsų svetainė bus rodoma šriftu „arial“. Į sąrašą galite įtraukti daugiau šriftų. „Sans-serif“yra bendras tipas, kuris bus naudojamas, kai jūsų pateiktas šriftas nebuvo prieinamas. Šrifto dydis (šrifto dydis) nustatytas kaip 12 pikselių. Tai yra absoliuti vertė. Jei norite redaguoti kitus šrifto dydžius (pvz., Antraštes, pastraipas, meniu elementus ir kt.), Vietoj „px“galite naudoti santykinį vienetą „em“. Tokiu būdu, jei norite pakeisti savo svetainės dydį, turėsite pakeisti tik kūno šrifto dydį. Paraštė nustatyta į 0 taškų visoms keturioms kūno žymos pusėms. Tai daroma siekiant įsitikinti, kad svetainė prilips prie lango viršaus.

3 veiksmas: konteinerio pridėjimas su antrašte ir turiniu

Dabar pridėsime konteinerį. Tai tiesiog centras, kuriame bus visa mūsų svetainė. Šiame konteineryje pridėsime dar du skyrius; turinio skyrius ir antraštė div. Mūsų html failas dabar atrodys taip: išbandykite turinio antraštę Prie mūsų css failo pridėsime šį kodą: div#container {width: 800px; paraštė: 0px auto; fonas: #FFFFFF; padding: 0px;} div#content {width: 800px; paminkštinimas: 100 pikselių; fonas: geltona;} div#antraštė {plotis: 800 taškų; aukštis: 100 taškų; fonas: mėlyna; pozicija: absoliuti; viršuje: 0 taškų;}. clearfix: po {content: "."; ekranas: blokas; aukštis: 0; aišku: abu; matomumas: paslėptas;}. clearfix {display: inline-block;}/* Paslėpti nuo „IE Mac“\*/. clearfix {display: block;} div#container reiškia, kad turime div žymą su ID „container“. Pridėsime keletą spalvų ir „paraštę: 0 pikselių automatinis“; norėdami įsitikinti, kad mūsų sudėtinis rodinys yra puslapio centre. Mes turime pateikti turiniui paminkštinimą ir antraštę absoliučią vertę su „top: 0px“, kad įsitikintume, jog antraštė yra virš kito turinio. bjaurios spalvos. Tai tik tam, kad būtų lengviau skaityti spalvas ir pamatyti skirtingus skyrius. Mums reikės šio keisto aiškaus pataisos kodo, kad mūsų navigacija ir turinio skyriai (pridėti kitame žingsnyje) nepatektų iš aplinkinių skyrių.

4 veiksmas: sukurkite du skyrius turinio skyriuje naršymui ir faktiniam turiniui

Dabar turinio skyriuje pridėsime dar du skyrius. Vienas skirtas naršymui, o kitas-tikram turiniui. Tarp turinio žymos; pridėsite naują kodą:

Pagrindinis naršymo turinys Pridėsime šiek tiek css kodo, kad būtų rodomi naršymo ir pagrindinio turinio skyriai; div#nav {width: 200px; plūdė: kairė; fonas: oranžinė;} div#maincontent {plotis: 600 taškų; plūdė: dešinė; fonas: rožinė;} Atkreipkite dėmesį į tai, kad abi šios divos yra plaukiojančios. Jei ankstesniame žingsnyje nebūtume įdėję papildomo „clearfix“kodo, „divs“sklandytų už aplinkinio div. Naudodami „clearfix“metodą užtikrinsime, kad taip neatsitiktų.

5 veiksmas: pridėkite papildomų elementų, skirtų navigacijos struktūrai

Dabar prie „nav“div pridėsime keletą papildomų elementų, kad sukurtume tam tikrą struktūrą mūsų tinklalapyje. Pakeiskite šį kodo bitą:

• Fou
• Baras

Dabar mes paskelbsime kodą, kad nustatytume, kaip turi būti rodomas div „navblock“. Atkreipkite dėmesį, kad „navblock“turi klasę, o ne ID. To priežastis paprasta; „divs“su ID rodomi tik vieną kartą (naršymo blokas, antraštė, poraštė ir kt.). Diskusijos su klasėmis gali būti rodomos daugiau nei vieną kartą. Čia mes naudosime klasę. Tik tuo atveju, jei vėliau norėsime pridėti kitą naršymo bloką.div.navblock {width: 180px; paraštė: 5 pikselių automatinis; kraštinė: 1 taškas raudona;} Jei norime pridėti dar vieną naršymo bloką, turėsite pridėti naują… struktūrą. Dabar jūsų kodas atrodys taip;

• Fou
• Baras
• Boo
• Toli

6 veiksmas: pridėkite papildomų elementų, skirtų pagrindinio turinio struktūrai

Dabar padarysime tą patį su pagrindiniu turiniu. Dabar kodas atrodo taip:

Lorem ipsum dolor sit amet,…

Vėlgi, mes pridėsime kodo fragmentą prie mūsų css failo, kad nustatytume, kaip turi būti rodomas skyrius: div.contentblock {width: 580px; paraštė: 5 pikselių automatinis; kraštinė: 1 taškas vientisa balta;} Dabar galime pridėti dar vieną turinio bloką, pridėdami kitą „…“pagrindiniame turinio skyriuje, kaip šis;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

7 žingsnis: Padarykite svetainę šiek tiek mažiau bjaurią

Dabar linksma dalis; spalvos. Dabar, kai turime pagrindinę div struktūrą, galime pakeisti spalvas į kažką šiek tiek mažiau chaotiško/negražaus/… Tiesiog žaiskite su spalvomis, esančiomis css faile. Čia yra visas tinklalapio, rodomo paveikslėlyje, html failas: testas

• Fou
• Baras
• Boo
• Toli

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Antraštė Ir tai yra visas css failas: body {background: #444444; šriftų šeima: verdana, arial, sans-serif; spalva: #444444; šrifto dydis: 12 pikselių; paraštė: 0 taškų;} div#konteineris {plotis: 800 taškų; paraštė: 0px auto; fonas: #FFFFFF; padding: 0px;} div#content {width: 800px; paminkštinimas: 100 pikselių; fonas: #FFFFFF;} div #antraštė {plotis: 800 taškų; aukštis: 100 taškų; fonas: #888888; pozicija: absoliuti; viršuje: 0 taškų;} div#nav {plotis: 200 taškų; plūdė: kairė; fonas: #FFFFFF;} div #maincontent {width: 600px; plūdė: dešinė; fonas: #DDDDDD;} div.navblock {plotis: 180 taškų; paraštė: 5 pikselių automatinis; kraštas: 1 piks. vientisas #DDDDDD;} div.contentblock {plotis: 580 piks.; paraštė: 5 pikselių automatinis; kraštas: 1 piks. vientisas #FFFFFF;}. clearfix: po {content: "."; ekranas: blokas; aukštis: 0; aišku: abu; matomumas: paslėptas;}. clearfix {display: inline-block;}/* Slėpti nuo „IE Mac“\*/. clearfix {display: block;} Taigi dabar jūs turite pagrindus. Žinoma, dar reikia daug ką redaguoti, pavyzdžiui, spalvas, šrifto dydžius, geriau atrodantį naršymo bloką … Tačiau ši instrukcija skirta tik div struktūrai. Jei norite pamatyti kitus susijusius nurodymus, visada galite paklausti. Žiūrėsiu, ar rasiu laiko.