Bazat e një faqe në internet të bazuar në Div: 7 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:34

Ky udhëzues do t'ju tregojë bazat se si të krijoni një faqe në internet me div. Sepse tabelat e përdorura për paraqitjen janë të këqija!: pPër të kuptuar këtë udhëzues, do t'ju duhet të dini html dhe css bazë. Nëse nuk kuptoni diçka, mos ngurroni të pyesni. Faqja ime personale gjithashtu përdor këtë lloj strukture div.

Hapi 1: Krijoni skedarët bazë

Së pari krijoni skedarin tuaj html. Ne do t'i shtojmë asaj bazat. Skedari css do të jetë bosh tani për tani. Skedari html tani përmban: test Ruajeni skedarin tuaj html si diçka.html. Ju mund ta zgjidhni vetë emrin. Skedari juaj css duhet të ruhet si.css. Sigurohuni që t'i jepni të njëjtin emër siç përmendet në skedarin html. Në këtë rast "style.css". Ne tani kemi një faqe të thjeshtë bosh HTML kur shihet paraprakisht në shfletuesin tonë.

Hapi 2: Redaktoni etiketën e trupit për ngjyrat themelore, shkronjat,…

Ne do ta lëmë skedarin html ashtu siç është dhe do të redaktojmë vetëm skedarin css. Shtoni kodin e mëposhtëm në skedarin tuaj css: body {background: #444444; font-family: verdana, arial, sans-serif; ngjyra: #444444; font-size: 12px; margin: 0px;} Me këtë bit të kodit ne do të përcaktojmë të gjitha vetitë e etiketës së trupit. Meqenëse e gjithë përmbajtja është në etiketën e trupit, këto cilësime do të ndikojnë në të gjithë faqen. Sfondi dhe ngjyra e shkronjave (ngjyra), janë vendosur në një ngjyrë gri të errët. Familja e shkronjave (font-family) është vendosur në verdana. Nëse kompjuteri i përdorur për shikimin e faqes sonë të internetit nuk ka fontin "verdana", ai do të shfaq faqen tonë me fontin "arial". Ju mund të shtoni më shumë shkronja në listë. "Sans-serif" është lloji i përgjithshëm i cili do të përdoret kur asnjë font që keni dhënë nuk ishte i disponueshëm. Madhësia e fontit (madhësia e fontit) është vendosur në 12 piksele. Kjo është një vlerë absolute. Nëse dëshironi të redaktoni madhësi të tjera të shkronjave (si titujt, paragrafët, artikujt e menysë, …) mund të përdorni njësinë relative "em" në vend të "px". Në këtë mënyrë, nëse doni të ndryshoni madhësinë e faqes tuaj të internetit, do t'ju duhet të ndryshoni vetëm madhësinë e fontit të trupit. Marzhi është vendosur në 0px për të katër anët e etiketës së trupit. Kjo është bërë për t'u siguruar që siti do të ngjitet në krye të dritares.

Hapi 3: Shtimi i një enë me titull dhe përmbajtje

Tani do të shtojmë enën. Ky është thjesht një div i përqendruar që do të përmbajë të gjithë faqen tonë të internetit. Në këtë enë, ne do të shtojmë dy div të tjerë; një përmbajtje div dhe një titull div. Skedari ynë html tani do të duket kështu: provoni titullin e përmbajtjes Ne do të shtojmë kodin e mëposhtëm në skedarin tonë css: div#container {width: 800px; diferenca: 0px automatike; sfond: #FFFFFF; mbushje: 0px;} div#përmbajtje {gjerësia: 800px; mbushje-krye: 100px; sfondi: e verdhë;} div#header {gjerësia: 800px; lartësia: 100px; sfond: blu; pozicioni: absolut; krye: 0px;}. clearfix: pas {përmbajtja: "."; ekran: bllok; lartësia: 0; qartë: të dyja; dukshmëria: e fshehur;}. clearfix {display: inline-block;}/* Fshih nga IE Mac \*/. clearfix {display: block;} div#container do të thotë që ne kemi një etiketë div me id "container". Ne do të shtojmë disa ngjyra dhe një "diferencë: 0px auto;" për t'u siguruar që ena jonë është e përqendruar në faqe. Ne duhet t'i japim përmbajtjes një mbushje dhe kokës një vlerë absolute me një "krye: 0px" për t'u siguruar që titulli është i pozicionuar mbi përmbajtjen tjetër. ngjyrat e shëmtuara. Justshtë vetëm për ta bërë më të lehtë leximin e ngjyrave dhe shikimin e div -ve të ndryshëm. Do të na duhet ky kod i çuditshëm i pastrimit për t'u siguruar që ndarjet tona të navigimit dhe përmbajtjes (të shtuara në hapin tjetër) të mos bien jashtë divit përreth.

Hapi 4: Bëni dy ndarje në ndarjen e përmbajtjes për lundrim dhe përmbajtje aktuale

Tani do të shtojmë dy div të tjerë në ndarjen e përmbajtjes. Një për navigimin dhe një për përmbajtjen aktuale. Në mes të etiketës së përmbajtjes; ju do të shtoni kodin e ri:

Lundrimi Përmbajtja kryesore Ne do të shtojmë një kod css për të shfaqur lundrimin dhe përmbajtjen kryesore; div#nav {gjerësia: 200px; noton: majtas; sfond: portokalli;} div#maincontent {gjerësia: 600px; noton: djathtas; sfondi: rozë;} Vini re faktin se këto dy ndarje janë të dyja lundruese. Nëse nuk do të kishim vendosur kodin shtesë të pastrimit në hapin e mëparshëm, divët do të notonin jashtë divit përreth. Me metodën e pastrimit, ne do të sigurohemi që kjo të mos ndodhë.

Hapi 5: Shtoni disa Diva shtesë për strukturën në lundrim

Tani do të shtojmë disa div shtesë në të dy "nav" div për të krijuar një lloj strukture në faqen tonë të internetit. Ndryshoni pjesën e mëposhtme të kodit:

• Foo
• Bar

Tani do të reklamojmë një pjesë të kodit për të përcaktuar sesi div "navblock" duhet të shfaqet. Vini re se blloku navblock ka një klasë, jo një ID. Arsyeja për këtë është e thjeshtë; divet me një ID shfaqen vetëm një herë (blloku i navigimit, titulli, fundi,…). Divet me klasa mund të shfaqen më shumë se një herë. Këtu do të përdorim një klasë. Vetëm në rast se do të duam të shtojmë një bllok navigimi më vonë on.div.navblock {gjerësia: 180px; diferenca: 5px automatike; kufi: 1px e kuqe e ngurtë;} Nëse duam të shtojmë një bllok tjetër lundrimi, thjesht do të duhet të shtoni një strukturë të re … Kodi juaj tani do të duket kështu;

• Foo
• Bar
• Boo
• Larg

Hapi 6: Shtoni disa Diva shtesë për strukturën në përmbajtjen kryesore

Tani do të bëjmë të njëjtën gjë për div kryesor të përmbajtjes. Kodi tani duket kështu:

Lorem ipsum dolor sit amet,…

Përsëri, ne do të shtojmë një pjesë të kodit në skedarin tonë css për të përcaktuar sesi div duhet të shfaqet: div.contentblock {gjerësia: 580px; diferenca: 5px automatike; kufi: 1px e bardhë e fortë;} Tani mund të shtojmë një bllok tjetër të përmbajtjes duke shtuar një tjetër "…" në pjesën kryesore të përmbajtjes si kjo;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Hapi 7: Bëni sitin pak më pak të shëmtuar

Tani pjesa argëtuese; ngjyrat. Tani që kemi strukturën kryesore div, ne mund t'i ndryshojmë ngjyrat në diçka pak më pak kaotike/të shëmtuar/… Thjesht luani me ngjyrat në skedarin css. Këtu është skedari i plotë html i faqes së internetit të shfaqur në imazh: test

• Foo
• Bar
• Boo
• Larg

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Header Dhe ky është skedari i plotë css: body {background: #444444; font-family: verdana, arial, sans-serif; ngjyra: #444444; font-size: 12px; margjina: 0px;} div#container {gjerësia: 800px; diferenca: 0px automatike; sfond: #FFFFFF; mbushje: 0px;} div#përmbajtje {gjerësia: 800px; mbushje-krye: 100px; sfond: #FFFFFF;} div #header {gjerësia: 800px; lartësia: 100px; sfond: #888888; pozicioni: absolut; lart: 0px;} div#nav {gjerësia: 200px; noton: majtas; sfond: #FFFFFF;} div #mbajtja kryesore {gjerësia: 600px; noton: djathtas; sfond: #DDDDDD;} div.navblock {gjerësia: 180px; diferenca: 5px automatike; kufiri: 1px solid #DDDDDD;} div.contentblock {gjerësia: 580px; diferenca: 5px automatike; border: 1px solid #FFFFFF;}. clearfix: after {content: "."; ekran: bllok; lartësia: 0; qartë: të dyja; shikueshmëria: e fshehur;}. clearfix {display: inline-block;}/* Fshih nga IE Mac \*/. clearfix {display: block;} Pra tani i ke bazat. Sigurisht ka akoma shumë për të redaktuar si ngjyrat, madhësitë e shkronjave, një bllok navigimi që duket më mirë, … Por ky udhëzues ka të bëjë vetëm me strukturën div. Nëse dëshironi të shihni udhëzime të tjera të ngjashme, gjithmonë mund të pyesni. Do të shoh nëse do të gjej kohë.