Orodha ya maudhui:
- Hatua ya 1: Unda Faili za Msingi
- Hatua ya 2: Hariri Lebo ya Mwili kwa Rangi za Msingi, Fonti,…
- Hatua ya 3: Kuongeza Kontena na Kichwa na Yaliyomo
- Hatua ya 4: Tengeneza Divs mbili katika Div ya Maudhui ya Urambazaji na Maudhui halisi
- Hatua ya 5: Ongeza Divisheni zingine za Muundo katika Urambazaji
- Hatua ya 6: Ongeza Divisheni zingine za Ziada za Muundo katika Yaliyomo Kuu
- Hatua ya 7: Fanya Tovuti iwe mbaya kidogo
Video: Misingi ya Tovuti ya Div: 7 Hatua
2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:56
Hii inayoweza kufundishwa itakuonyesha misingi ya jinsi ya kujenga wavuti na divs. Kwa sababu meza zinazotumiwa kwa mpangilio ni mbaya! Ili kuelewa hii inayoweza kufundishwa, utahitaji kujua html ya msingi na css. Ikiwa hauelewi kitu, jisikie huru kuuliza. Ukurasa wangu wa kibinafsi pia hutumia aina hii ya muundo wa div.
Hatua ya 1: Unda Faili za Msingi
Kwanza tengeneza faili yako ya html. Tutaongeza misingi yake. Faili ya css itakuwa tupu kwa faili ya sasa.html sasa ina: jaribu Hifadhi faili yako ya html kama kitu.html. Unaweza kuchagua jina mwenyewe. Faili yako ya css lazima iokolewe kama.css. Hakikisha unaipa jina sawa na lililotajwa kwenye faili ya html. Katika kesi hii "style.css". Sasa tuna ukurasa wazi wa tupu ya html wakati ulionyeshwa awali katika kivinjari chetu.
Hatua ya 2: Hariri Lebo ya Mwili kwa Rangi za Msingi, Fonti,…
Tutaacha faili ya html kama ilivyo, na tuhariri faili ya css tu. Ongeza nambari ifuatayo kwenye faili yako ya css: mwili {background: # 444444; font-familia: verdana, arial, sans-serif; rangi: # 444444; saizi ya fonti: 12px; margin: 0px;} Kwa msimbo huu kidogo tutafafanua mali zote za lebo ya mwili. Kwa kuwa yaliyomo yote yako kwenye lebo ya mwili, mipangilio hii itaathiri ukurasa wote. Asili na rangi ya fonti (rangi), imewekwa kuwa kijivu giza. Fonti ya familia (font-family) imewekwa kwenye verdana. Ikiwa kompyuta inayotumiwa kutazama wavuti yetu haina font "verdana", itaonyesha tovuti yetu katika font "arial". Unaweza kuongeza fonti zaidi kwenye orodha. "Sans-serif" ni aina ya generic ambayo itatumika wakati hakuna font uliyotoa ilipatikana. Ukubwa wa font (font-size) umewekwa kwa saizi 12. Hii ni thamani kamili. Ikiwa unataka kuhariri saizi zingine za fonti (kama vichwa, aya, vitu vya menyu, …) unaweza kutumia kitengo cha jamaa "em" badala ya "px". Kwa njia hii, ikiwa unataka kubadilisha saizi ya wavuti yako, itabidi ubadilishe saizi ya fonti ya mwili. Hii imefanywa ili kuhakikisha kuwa tovuti itashika juu ya dirisha.
Hatua ya 3: Kuongeza Kontena na Kichwa na Yaliyomo
Sasa tutaongeza chombo. Hii ni sehemu ya katikati ambayo itakuwa na tovuti yetu yote. Katika chombo hiki, tutaongeza divs mbili zaidi; faili ya div na kichwa cha kichwa div. Faili yetu ya html sasa itaonekana kama hii: jaribu kichwa cha Maudhui Tutaongeza nambari ifuatayo kwa faili yetu ya css: div # chombo {upana: 800px; margin: 0px auto; historia: #FFFFFF; padding: 0px;} div # yaliyomo {upana: 800px; juu-juu: 100px; msingi: manjano;} div # kichwa {upana: 800px; urefu: 100px; historia: bluu; msimamo: kabisa; juu: 0px;}. clearfix: baada ya {yaliyomo: "."; onyesha: kuzuia; urefu: 0; wazi: zote mbili; kujulikana: siri;}. clearfix {display: inline-block;} / * Ficha kutoka IE Mac / * /. clearfix {display: block;} div # container ina maana kwamba tuna tag ya div na "chombo" cha id. Tutaongeza rangi na "margin: 0px auto;" kuhakikisha kontena letu limejikita katika ukurasa. Tunapaswa kutoa yaliyomo juu-juu na kichwa kiwe na dhamana kamili na "juu: 0px" ili kuhakikisha kichwa kimewekwa juu ya yaliyomo mengine. rangi mbaya. Ni tu kurahisisha kusoma rangi na kuona divs tofauti. Tutahitaji nambari hii ya wazi ya wazi ili kuhakikisha kuwa sehemu zetu za urambazaji na yaliyomo (imeongezwa katika hatua inayofuata) haionekani kwa div inayozunguka.
Hatua ya 4: Tengeneza Divs mbili katika Div ya Maudhui ya Urambazaji na Maudhui halisi
Sasa tutaongeza divs mbili zaidi katika div ya yaliyomo. Moja ya urambazaji na moja kwa yaliyomo halisi. Katika kati ya lebo ya yaliyomo; utaongeza nambari mpya:
Urambazaji Yaliyomo kuu Tutaongeza nambari fulani ya css kuonyesha urambazaji na divs kuu za maudhui; div # nav {width: 200px; kuelea: kushoto; msingi: machungwa;} div # maincontent {upana: 600px; kuelea: kulia; background: pink;} Kumbuka ukweli kwamba hizi div mbili zinaelea. Ikiwa hatungeweka nambari ya wazi ya ziada katika hatua ya awali, divs zingeelea nje ya div iliyo karibu. Kwa njia ya wazi, tutahakikisha hiyo haitokei.
Hatua ya 5: Ongeza Divisheni zingine za Muundo katika Urambazaji
Sasa tutaongeza divs za ziada kwa "nav" div zote mbili ili kuunda aina fulani ya muundo kwenye ukurasa wetu wa wavuti. Badilisha nambari ifuatayo ya msimbo:
- Foo
- Baa
Sasa tutatangaza kipande cha nambari kufafanua jinsi div "navblock" inavyopaswa kuonyeshwa. Kumbuka kuwa navblock ina darasa, sio kitambulisho. Sababu ya hii ni rahisi; divs na kitambulisho huonyeshwa mara moja tu (kizuizi cha urambazaji, kichwa, kijachini,…). Divs na madarasa zinaweza kuonyeshwa zaidi ya mara moja. Hapa tutatumia darasa. Ila tu tutataka kuongeza kizuizi kingine cha urambazaji baadaye kwenye.div.navblock {width: 180px; margin: 5px auto; mpaka: 1px nyekundu nyekundu;} Ikiwa tunataka kuongeza kizuizi kingine cha urambazaji, itabidi tu uongeze muundo mpya… Nambari yako sasa itaonekana kama hii;
- Foo
- Baa
- Boo
- Mbali
Hatua ya 6: Ongeza Divisheni zingine za Ziada za Muundo katika Yaliyomo Kuu
Sasa tutafanya vivyo hivyo kwa div kuu. Nambari hiyo sasa inaonekana kama hii:
Lorem ipsum dolor sit amet,…
Tena, tutaongeza kipande cha nambari kwenye faili yetu ya css kuamua jinsi div inavyopaswa kuonyeshwa: div.contentblock {upana: 580px; margin: 5px auto; mpaka: 1px nyeupe nyeupe;} Sasa tunaweza kuongeza kizuizi kingine cha yaliyomo kwa kuongeza mwingine "…" katika sehemu kuu kama hii;
Lorem ipsum dolor sit amet,…
Nunc curs, just eget elementum dictum,…
Hatua ya 7: Fanya Tovuti iwe mbaya kidogo
Sasa sehemu ya kufurahisha; rangi Sasa kwa kuwa tuna muundo kuu wa div, tunaweza kubadilisha rangi kuwa kitu kidogo chaotic / mbaya /… Cheza tu kuzunguka na rangi kwenye faili ya css. Hapa kuna faili kamili ya html ya ukurasa wa wavuti ulioonyeshwa kwenye picha.: mtihani
- Foo
- Baa
- Boo
- Mbali
Lorem ipsum dolor sit amet,…
Nunc curs, just eget elementum dictum,…
Kichwa Na hii ndio faili kamili ya css: mwili {msingi: # 444444; font-familia: verdana, arial, sans-serif; rangi: # 444444; saizi ya fonti: 12px; margin: 0px;} div # chombo {upana: 800px; margin: 0px auto; historia: #FFFFFF; padding: 0px;} div # yaliyomo {upana: 800px; juu-juu: 100px; background: #FFFFFF;} div # kichwa {upana: 800px; urefu: 100px; historia: # 888888; msimamo: kabisa; juu: 0px;} div # nav {upana: 200px; kuelea: kushoto; background: #FFFFFF;} div # maincontent {upana: 600px; kuelea: kulia; msingi: #DDDDDD;} div.navblock {upana: 180px; margin: 5px auto; mpaka: 1px imara #DDDDDD;} div.contentblock {upana: 580px; margin: 5px auto; mpaka: 1px solid #FFFFFF;}. clearfix: baada ya {yaliyomo: "."; onyesha: kuzuia; urefu: 0; wazi: zote mbili; visibility: hidden;}. clearfix {display: inline-block;} / * Ficha kutoka IE Mac / * /. clearfix {display: block;} Kwa hivyo sasa una misingi. Kwa kweli bado kuna mengi ya kuhariri kama rangi, saizi za fonti, kizuizi bora cha urambazaji,… Lakini mafundisho haya ni juu tu ya muundo wa div. Ikiwa ungependa kuona maagizo mengine yanayohusiana, unaweza kuuliza kila wakati. Nitaona ikiwa ninaweza kupata wakati.
Ilipendekeza:
Kuambatanisha Kalenda za Google kwenye Tovuti za Google: Hatua 5
Kuambatanisha Kalenda za Google kwenye Tovuti za Google: Hii ni ya kufundisha kukufundisha jinsi ya kuunda, kutumia na kuhariri Kalenda za Google na kisha kuziambatisha kwenye Tovuti ya Google ukitumia uwezo wa kushiriki. Hii inaweza kuwa na faida kwa watu wengi kwani Tovuti za Google zinaweza kutumiwa kuratibu na kusambaza i
Jinsi ya Kutengeneza Tovuti ya Msingi Kutumia Notepad: 4 Hatua
Jinsi ya Kutengeneza Wavuti ya Msingi Kutumia Notepad: Je! Kuna mtu yeyote amejiuliza " Je! Ninafanyaje tovuti kutoka kwa mpango wa msingi wa uandishi? tovuti kutumia tu notepad
Wakati Makita BL1813G Betri hazitatosha Redio ya Tovuti ya Makita: Hatua 6
Wakati Betri za Makita BL1813G hazitatosha Redio ya Tovuti ya Makita: Betri za Makita Cordless 18V Li-Ion Combi Drill HP457D hazitoshei upeanaji wa redio za wavuti, kitu cha kufanya na ukweli kwamba drill hii inauzwa kwa maduka ya DIY na Amazon kwa matumizi ya DIY. Hii inakera sana kwani sikujua
Jinsi ya Kutengeneza Tovuti Nyepesi na Rahisi na Bootstrap 4: 7 Hatua
Jinsi ya kutengeneza Wavuti Nyepesi na Rahisi na Bootstrap 4: Madhumuni ya Agizo hili ni kuwapa wale wanaojua programu - HTML au vinginevyo - utangulizi rahisi wa kutengeneza kwingineko mkondoni na Bootstrap 4. Nitakutembea kupitia usanidi wa kwanza ya wavuti, jinsi ya kuunda chache
Jinsi ya Kuunda Tovuti (Mwongozo wa Hatua kwa Hatua): Hatua 4
Jinsi ya Kuunda Tovuti (Mwongozo wa Hatua kwa Hatua): Katika mwongozo huu, nitakuonyesha jinsi watengenezaji wengi wa wavuti huunda tovuti zao na jinsi unavyoweza kuepuka wajenzi wa wavuti wa bei ghali ambao mara nyingi ni mdogo sana kwa wavuti kubwa. kukusaidia epuka makosa ambayo nilifanya wakati nilianza