Ukuhlelwa kwe- CSS kudinga ukuthi ucabange ngesakhiwo sakho sewebhusayithi, bese uthatha izingcezu bese uzihlanganisa. Funda indlela yokwakha isakhiwo se-3-ikholomu elula nge-CSS.
01 ka 09
Dweba I-Layout Yakho
Ungakwazi ukudweba isakhiwo sakho ephepheni noma ohlelweni lwehluzo . Uma usuvele uphethe ifreyimu noma umklamo ojulile engqondweni, yenza kube lula kumabhokisi ayisisekelo akha isayithi. Lo mklamo ohambisana nalesi sihloko unamakholomu amathathu endaweni enkulu yokuqukethwe, kanye nekhanda nokuhamba ngezinyawo. Uma ubheka eduze, ungabona ukuthi amakholomu amathathu awalingani ngobubanzi.
Ngemuva kokuthi uhlele isakhiwo sakho, ungaqala ukucabanga ngobukhulu. Lesi siklamo sokuklama sizoba nobukhulu obuyisisekelo obulandelayo:
- Awekho ama-pixel angu-900 ububanzi
- I-20 px gutter ngakwesobunxele
- 10 px phakathi kwamakholomu nemigqa
- Amakholomu angu-250px, 300px, no-300px ububanzi
- Umugqa ophezulu ngu-150px ubude
- Umugqa ophansi ungama-100px ubude
02 ka 09
Bhala Basic HTML / CSS futhi Yakha Container Element
Kusukela leli khasi lizoba yidokhumenti ye-HTML evumelekile, Qala nge-container ye-HTML engenalutho
Ngeza izitayela eziyisisekelo ze-CSS ukuze ungene emkhakheni wekhasi, imingcele, namadadadi . Ngenkathi kunezinye izitayela ezijwayelekile ze-CSS zamadokhumenti amasha, lezi zitayela zincane kakhulu okudingayo ukuze uthole ukuhlelwa okuhlanzekile. Yengeze enhloko yedokhumenti yakho:
Ukuze uqale ukwakha isakhiwo, faka isici sesitsha. Ngezinye izikhathi kwenzeka ukuthi ungakwazi ukususa isitsha ngokuhamba kwesikhathi, kodwa ngezindawo eziningi ezihleliwe-ububanzi, ukuba nesici se-container kwenza kube lula ukuphatha iziphequluli ezahlukene zewebhu. Ngakho emzimbeni ufake lokhu:
Futhi kufasiteleni lesitayela se-CSS, faka:
#container {}03 ka 09
Isitayela se-Container
Isiqukathi sichaza ukuthi kuzoba kanjani okuqukethwe kwekhasi lewebhu, kanye nanoma yiziphi izimakethe ezungeze ngaphandle nokufaka ngaphakathi ngaphakathi. Kulo dokhumenti, isitsha sinamaphesenti angu-870px ngamanzi we-pixel angu-20 ngakwesobunxele. I-gutter isethelwe ngesitayela se-margin, kodwa ukufakwa kwendwangu kulesi sitsha kukhishwe ukuze kuvimbele noma yiziphi izakhi kusukela ekujuleni njenge-container.
#container {ububanzi: 870px; umkhawulo: 0 0 0 20px; / * phezulu ngakwesokudla kwesokunxele kwesokunxele * / padding: 0; }}Uma ulondoloza idokhumenti yakho manje, kuzoba nzima ukubona isitsha ngoba asinalutho kuwo. Uma ungeze umbhalo womnikazi wendawo, uzokwazi ukubona isici sesitsha ngokucacile.
04 ka 09
Sebenzisa i-Tagline ye-Headline ye-Header
Indlela enquma ngayo ukuthambisa umugqa wekhanda uncike kakhulu kulokho okukuwo. Uma umugqa wekhanda uzoba ne-logo yesithombe kanye nekhanda, bese usebenzisa ithegi yekhanda (
) inengqondo kunokusebenzisa . Ungakwazi ukubeka isihloko esihlokweni ngendlela efanayo nesitayela se-div, futhi ugweme amathegi angaphandle.
I-HTML yomugqa wekhanda iya phezulu kwesitsha futhi ibukeka kanje:
Umthamo wami wekhanda
Khona-ke, ukusetha izitayela kuso, umngcele obomvu wanezelwa ngezansi ukuze ubone ukuthi uphela nini, ama-margins kanye ne-padding aphelile, ububanzi bubekwe ku-100% nokuphakama kuya ku-150px:
#container h1 {umkhawulo: 0; i-padding: 0; ububanzi: 100%; ukuphakama: 150px; faka: kwesokunxele; umngcele-ngezansi: # c00 3px eqinile; }} Ungakhohlwa ukuthambisa lesi sici nge-float: kwesokunxele; impahla. Isihluthulelo sokubhala izakhiwo ze-CSS ukuthambisa yonke into - ngisho nezinto ezifanayo ububanzi njengoba isitsha. Ngaleyo ndlela, uhlale wazi ukuthi izakhi zizolala kuphi ekhasini.
Umkhethi wezintambo ze- CSS usebenzise izitayela kuphela ezakhiweni ze-H1 ezingaphakathi kwento ye-#container.
05 ka 09
Ukuze uthole amakholomu amathathu, Qala Ngokukwakha Amakholomu Amabili
Uma wakhe isakhiwo sekholomu ezintathu nge-CSS, udinga ukuhlukanisa isakhiwo sakho ngamaqembu amabili. Ngakho-ke kulolu hlobo lwesakhiwo sekholomu ezintathu, ikholomu eliphakathi nelungile futhi lihlelwe futhi libekwe eceleni kwekholomu lesobunxele emgqeni wamakholomu amabili lapho ikholomu lesobunxele liyi-250px ububanzi, futhi ikholomu elungile lingu-610px ububanzi (300 ngayinye yamakholomu amabili , plus 10px emgodini phakathi kwabo).
I-HTML ibheka kanje:
Uqondise i-ex ea commodo consequat. Uma uthanda ukwenza imali engcono kakhulu, lorem ipsum dolor sit amet. Ngokuphindaphindiwe ku-voluptate quis nostrud ukuvivinya umzimba wakho bese uchofoza. Velit esse cillum dolore ullamco laboris nisi ut aliquip i-ex ela commodo consequat.
Ukukhangisa okuncane kakhulu, kungakapheli isikhathi sokuqhathaniswa ne-ullamco laboris nisi. Usebenza kahle futhi uthanda. Velit esse cillum dolore eu fugiat nulla pariatur.
Umbhalo wesibambiso kumakholomu wenza kubonakale kakhulu uma kuhlolwa. I-CSS ibukeka kanje:
#container # col1 {ububanzi: 250px; faka: kwesokunxele; } #container # col2outer {ububanzi: 610px; faka: kwesokudla; umkhawulo: 0; i-padding: 0; }} Ikholomu ngakwesobunxele ithayela ngakwesobunxele, kanti elinye lihanjiswa ngakwesokudla. Ngenxa yokuthi ububanzi bobubili bekholomu ngu-860px, kune-gutter 10px phakathi kwabo.
06 ka 09
Engeza Amakholomu Amabili Ngaphakathi Kwikholamu Yesibili Yesibili
Ukuze udale amakholomu amathathu, engeza ama-divs amabili phakathi kwekholomu yesibili ebanzi, njengoba nje ungeze ama-div div 2 ngaphakathi kwekholomu yesitsha esiteji sokugcina. I-HTML ibheka kanje:
Ukukhangisa okuncane, kungakapheli isikhathi sokusebenzisa i-ullamco laboris nisi. Usebenza kahle futhi uthanda. Velit esse cillum dolore eu fugiat nulla pariatur.
I-temporarily release temporarily, quia voluptas sit aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, i-magam aliquam quaerat voluptatem. I-Itaque earum i-hier tencor i-tenetur i-aptus e-mail, i-perspectives yakho ingabonakali isikhathi sokusebenza nokusebenza.
Futhi iCSS ibukeka kanje:
# col2outer # col2mid {ububanzi: 300px; faka: kwesokunxele; } # col2outer # col2side {ububanzi: 300px; faka: kwesokudla; }} Njengoba lawa mabhokisi amabili angu-300px aphakathi kwebhokisi elibanzi le-610px, lizophinde libe ne-10px encane phakathi kwabo.
07 ka 09
Engeza ku-Footer
Manje ukuthi konke okunye kwekhasi kubhalwe, ungangeza ezinyaweni. Sebenzisa i-div yokugcina nge-id "yezinyawo", bese wengeza okuqukethwe ukuze ukwazi ukukubona. Ungakwazi futhi ukwengeza umngcele phezulu, ngakho uzokwazi ukuthi uqala kuphi.
I-HTML:
Copyright © 2017
I-CSS:
#container #footer {float: kwesokunxele; ububanzi: 870px; umngcele-phezulu: # c00 3px eqinile; }} 08 ka 09
Engeza ezitayela zakho zomuntu siqu nokuqukethwe
Njengoba manje usuqedile ukuhlela, ungaqala ukwengeza izitayela zakho nokuqukethwe kwakho. Khumbula ukuthi imingcele ehlokweni nasezinyaweni zenezelwe ukukhombisa izigaba zendawo, hhayi ngqo ukuklama.
09 ka 09
I-HTML Yokugcina / i-CSS
Nansi yonke idokhumenti, i-HTML ne-CSS:
Idokhumenti engenacala html, umzimba {margin: 0px; i-padding: 0px; umngcele: 0px; } #container {ububanzi: 870px; umkhawulo: 0 0 0 20px; / * phezulu ngakwesokudla kwesokunxele kwesokunxele * / padding: 0; umbala wangemuva: #fff; } #container h1 {margin: 0; i-padding: 0; ububanzi: 100%; ukuphakama: 150px; faka: kwesokunxele; umngcele-ngezansi: # c00 3px eqinile; } #container # col1 {ububanzi: 250px; faka: kwesokunxele; } #container # col2outer {ububanzi: 610px; faka: kwesokudla; umkhawulo: 0; i-padding: 0; } # col2outer # col2mid {ububanzi: 300px; faka: kwesokunxele; } # col2outer # col2side {ububanzi: 300px; faka: kwesokudla; } #container #footer {float: kwesokunxele; ububanzi: 870px; umngcele-phezulu: # c00 3px eqinile; } Umthamo wami wekhanda Ukuhlanganisa i-ex-commodo consequat.
Ukukhangisa kancane kancane.
I-Nam libero tempore.
I-HTML yomugqa wekhanda iya phezulu kwesitsha futhi ibukeka kanje:
Umthamo wami wekhanda
Khona-ke, ukusetha izitayela kuso, umngcele obomvu wanezelwa ngezansi ukuze ubone ukuthi uphela nini, ama-margins kanye ne-padding aphelile, ububanzi bubekwe ku-100% nokuphakama kuya ku-150px:
#container h1 {umkhawulo: 0; i-padding: 0; ububanzi: 100%; ukuphakama: 150px; faka: kwesokunxele; umngcele-ngezansi: # c00 3px eqinile; }}Ungakhohlwa ukuthambisa lesi sici nge-float: kwesokunxele; impahla. Isihluthulelo sokubhala izakhiwo ze-CSS ukuthambisa yonke into - ngisho nezinto ezifanayo ububanzi njengoba isitsha. Ngaleyo ndlela, uhlale wazi ukuthi izakhi zizolala kuphi ekhasini.
Umkhethi wezintambo ze- CSS usebenzise izitayela kuphela ezakhiweni ze-H1 ezingaphakathi kwento ye-#container.
05 ka 09
Ukuze uthole amakholomu amathathu, Qala Ngokukwakha Amakholomu Amabili
Uma wakhe isakhiwo sekholomu ezintathu nge-CSS, udinga ukuhlukanisa isakhiwo sakho ngamaqembu amabili. Ngakho-ke kulolu hlobo lwesakhiwo sekholomu ezintathu, ikholomu eliphakathi nelungile futhi lihlelwe futhi libekwe eceleni kwekholomu lesobunxele emgqeni wamakholomu amabili lapho ikholomu lesobunxele liyi-250px ububanzi, futhi ikholomu elungile lingu-610px ububanzi (300 ngayinye yamakholomu amabili , plus 10px emgodini phakathi kwabo).
I-HTML ibheka kanje:
Uqondise i-ex ea commodo consequat. Uma uthanda ukwenza imali engcono kakhulu, lorem ipsum dolor sit amet. Ngokuphindaphindiwe ku-voluptate quis nostrud ukuvivinya umzimba wakho bese uchofoza. Velit esse cillum dolore ullamco laboris nisi ut aliquip i-ex ela commodo consequat.
Ukukhangisa okuncane kakhulu, kungakapheli isikhathi sokuqhathaniswa ne-ullamco laboris nisi. Usebenza kahle futhi uthanda. Velit esse cillum dolore eu fugiat nulla pariatur.
Umbhalo wesibambiso kumakholomu wenza kubonakale kakhulu uma kuhlolwa. I-CSS ibukeka kanje:
#container # col1 {ububanzi: 250px; faka: kwesokunxele; } #container # col2outer {ububanzi: 610px; faka: kwesokudla; umkhawulo: 0; i-padding: 0; }}Ikholomu ngakwesobunxele ithayela ngakwesobunxele, kanti elinye lihanjiswa ngakwesokudla. Ngenxa yokuthi ububanzi bobubili bekholomu ngu-860px, kune-gutter 10px phakathi kwabo.
06 ka 09
Engeza Amakholomu Amabili Ngaphakathi Kwikholamu Yesibili Yesibili
Ukuze udale amakholomu amathathu, engeza ama-divs amabili phakathi kwekholomu yesibili ebanzi, njengoba nje ungeze ama-div div 2 ngaphakathi kwekholomu yesitsha esiteji sokugcina. I-HTML ibheka kanje:
Ukukhangisa okuncane, kungakapheli isikhathi sokusebenzisa i-ullamco laboris nisi. Usebenza kahle futhi uthanda. Velit esse cillum dolore eu fugiat nulla pariatur.
I-temporarily release temporarily, quia voluptas sit aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, i-magam aliquam quaerat voluptatem. I-Itaque earum i-hier tencor i-tenetur i-aptus e-mail, i-perspectives yakho ingabonakali isikhathi sokusebenza nokusebenza.
Futhi iCSS ibukeka kanje:
# col2outer # col2mid {ububanzi: 300px; faka: kwesokunxele; } # col2outer # col2side {ububanzi: 300px; faka: kwesokudla; }}Njengoba lawa mabhokisi amabili angu-300px aphakathi kwebhokisi elibanzi le-610px, lizophinde libe ne-10px encane phakathi kwabo.
07 ka 09
Engeza ku-Footer
Manje ukuthi konke okunye kwekhasi kubhalwe, ungangeza ezinyaweni. Sebenzisa i-div yokugcina nge-id "yezinyawo", bese wengeza okuqukethwe ukuze ukwazi ukukubona. Ungakwazi futhi ukwengeza umngcele phezulu, ngakho uzokwazi ukuthi uqala kuphi.
I-HTML:
Copyright © 2017
I-CSS:
#container #footer {float: kwesokunxele; ububanzi: 870px; umngcele-phezulu: # c00 3px eqinile; }}08 ka 09
Engeza ezitayela zakho zomuntu siqu nokuqukethwe
Njengoba manje usuqedile ukuhlela, ungaqala ukwengeza izitayela zakho nokuqukethwe kwakho. Khumbula ukuthi imingcele ehlokweni nasezinyaweni zenezelwe ukukhombisa izigaba zendawo, hhayi ngqo ukuklama.
09 ka 09
I-HTML Yokugcina / i-CSS
Nansi yonke idokhumenti, i-HTML ne-CSS:
Umthamo wami wekhanda Ukuhlanganisa i-ex-commodo consequat.
Ukukhangisa kancane kancane.
I-Nam libero tempore.
Ukuhlanganisa i-ex-commodo consequat.
Ukukhangisa kancane kancane.
I-Nam libero tempore.