CSS perenah merlukeun anjeun mikir perenah ramatloka anjeun sakabéhna, lajeng nyandak buah teras nahan aranjeunna duaan. Diajar kumaha ngawangun hiji tata perenah 3-kolom basajan kalawan CSS.
01 of 09
Tarik Layout anjeun
Anjeun tiasa ngagambar perenah anjeun dina kertas atawa dina program grafik . Lamun geus boga kawat-pigura atawa malah design leuwih luas dina pikiran, simplify ka wadah buleud dasar anu nyieun nepi loka. Desain ieu nu accompanies artikel ieu boga tilu kolom di wewengkon eusi utama, sakumaha ogé salaku lulugu sarta footer. Lamun kasampak raket, anjeun tiasa ningali yén tilu kolom henteu sarua dina rubak.
Saanggeus perenah anjeun digambar kaluar, Anjeun bisa ngamimitian pamikiran tina dimensi. conto desain ieu akang gaduh dimensi dasar handap:
- Taya leuwih ti 900 piksel lega
- 20 px talang on kénca
- 10 px antara kolom jeung barisan
- Kolom anu 250px, 300px, sarta 300px lega
- Baris luhur nyaéta 150px jangkung
- Baris handap nyaéta 100px jangkung
02 of 09
Tulis HTML Dasar / CSS jeung Jieun Wadahna Unsur
Kusabab kaca ieu bakal dokumen HTML valid, Mimitian kalayan hiji wadahna HTML kosong
Tambahkeun dina gaya CSS dasar pikeun enol kaluar margins kaca, wates, sarta paddings . Bari aya séjén gaya CSS baku pikeun dokumén anyar, gaya ieu minimum nu perlu meunangkeun perenah beresih. Tambahkeun ka kapala dokumen anjeun:
Pikeun ngamimitian ngawangun tata perenah, nempatkeun dina unsur wadahna. Ieu kadang kajadian nu bisa meunang leupas tina wadahna engké, tapi pikeun paling layouts dibereskeun-lebar, mibanda unsur wadahna ngajadikeun eta gampang ngatur sakuliah panyungsi Web béda. Ku kituna dina awak nempatkeun ieu:
Sarta dina lambaran gaya CSS, nempatkeun:
#container {}03 of 09
Gaya nu Wadahna
wadahna ngahartikeun sabaraha lega eusi kaca web bakal, kitu ogé sagala margins sabudeureun luar sarta padding asup ka jero. Pikeun dokumen ieu, wadahna geus 870px lega sareng talang 20 piksel nu aya dina kénca. talang nu keur nyetél ku gaya margin, tapi padding on wadahna geus zeroed kaluar pikeun nyegah elemen wae ti keur jadi lega sakumaha wadahna.
#container {lebar: 870px; margin: 0 0 0 20px; / * Luhur katuhu handap kénca * / padding: 0; }Lamun ngahemat dokumen anjeun ayeuna, éta bakal susah ningali wadahna sabab boga nanaon di eta. Lamun ditambahkeun placeholder téks, Anjeun bakal bisa ningali unsur wadahna leuwih jelas.
04 of 09
Paké Tag headline pikeun Lulugu teh
Kumaha anjeun mutuskeun gaya baris lulugu gumantung loba kana naon di jerona. Lamun baris lulugu anu ngan bade gaduh grafis logo na headline, teras maké tag headline (
) ngajadikeun rasa leuwih ti maké . Anjeun tiasa gaya headline cara sarua anjeun gaya div a, jeung anjeun ulah tag extraneous.
The HTML kanggo urutan lulugu mana di luhureun wadah jeung Sigana mah ieu:
abdi Lulugu Baris
Lajeng, pikeun ngeset gaya ka dinya, wates beureum ieu ditambahkeun kana handap sahingga bisa ningali mana eta ends, anu margins na padding anu zeroed kaluar, lebar disetel ka 100% jeung jangkungna nepi ka 150px:
#container h1 {margin: 0; padding: 0; lebar: 100%; jangkungna: 150px; ngambang: kénca; Wates-handap: # c00 solid 3px; } Ulah hilap ka ngambang unsur ieu kalawan ngambang di: ditinggalkeun; harta. Konci pikeun nulis layouts CSS nyaéta pikeun ngambang sagalana - malah hal anu lebar sarua salaku wadahna. Cara anu, anjeun salawasna terang dimana unsur bakal nutupan kaca.
A pamilihan CSS turunan dilarapkeun gaya ukur keur elemen H1 anu jero unsur #container.
05 of 09
Pikeun Cokot Tilu Kolom, Mimitian ku Gedong Dua Kolom
Lamun anjeun ngawangun hiji tata perenah tilu-kolom kalawan CSS, Anjeun kudu ditilik perenah anjeun kana grup dua. Ku kituna pikeun perenah tilu-kolom ieu, tengah sarta kolom katuhu jeung dikelompokkeun sarta ditempatkeun gigireun kolom kénca dina perenah dua-kolom mana kolom kénca nyaéta 250px lega, sarta kolom katuhu nyaéta 610px lega (300 unggal keur dua kolom , ditambah 10px keur talang antara aranjeunna).
HTML nu Sigana mah ieu:
UT aliquip ex EA commodo consequat. Velit esse cillum dolore UT enim ad minim veniam, lorem ipsum dolor diuk amet. Dina reprehenderit di voluptate quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi UT aliquip ex EA commodo consequat.
UT enim ad minim veniam, séd ulah eiusmod tempor incididunt ullamco laboris nisi. UT labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur.
Placeholder téks dina kolom ngajadikeun eta leuwih katingali nalika tés. CSS di Sigana mah ieu:
#container # col1 {lebar: 250px; ngambang: kénca; } #container # col2outer {lebar: 610px; ngambang: katuhu; margin: 0; padding: 0; } Kolom dina kénca ieu floated ka kénca, sedengkeun lianna anu floated ka katuhu. Kusabab éta total rubak duanana kolom téh 860px, aya talang 10px antara aranjeunna.
06 of 09
Tambahkeun Dua Kolom jero Wide Tihang Kadua
Pikeun nyieun éta tilu kolom, nambahan dua divs jero kolom kadua lega, kawas nu ditambahkeun 2 divs jero kolom wadahna dina hambalan panungtungan. HTML nu Sigana mah ieu:
UT enim ad minim veniam, séd ulah eiusmod tempor incididunt ullamco laboris nisi. UT labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur.
Nam libero tempore, voluptas quia diuk aspernatur dicta sunt explicabo. Ullam corporis laboriosam suscipit, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, séd UT perspiciatis unde omnis tempora incidunt UT labore et dolore.
Sarta CSS di Sigana mah ieu:
# Col2outer # col2mid {lebar: 300px; ngambang: kénca; } # Col2outer # col2side {lebar: 300px; ngambang: katuhu; } Kusabab dua 300px buleud ieu lega anu di jero hiji kotak lega 610px, aya deui bakal talang 10px antara aranjeunna.
07 of 09
Tambahkeun di Footer nu
Ayeuna yén sésana kaca ieu styled, Anjeun bisa nambah di footer nu. Paké div panungtungan sareng "footer" id, sarta nambahan eusi ku kituna anjeun bisa nempo éta. Anjeun oge bisa nambahkeun wates hiji di luhur, jadi nu bakal nyaho mana eta dimimitian.
HTML nu:
The HTML kanggo urutan lulugu mana di luhureun wadah jeung Sigana mah ieu:
abdi Lulugu Baris
Lajeng, pikeun ngeset gaya ka dinya, wates beureum ieu ditambahkeun kana handap sahingga bisa ningali mana eta ends, anu margins na padding anu zeroed kaluar, lebar disetel ka 100% jeung jangkungna nepi ka 150px:
#container h1 {margin: 0; padding: 0; lebar: 100%; jangkungna: 150px; ngambang: kénca; Wates-handap: # c00 solid 3px; }Ulah hilap ka ngambang unsur ieu kalawan ngambang di: ditinggalkeun; harta. Konci pikeun nulis layouts CSS nyaéta pikeun ngambang sagalana - malah hal anu lebar sarua salaku wadahna. Cara anu, anjeun salawasna terang dimana unsur bakal nutupan kaca.
A pamilihan CSS turunan dilarapkeun gaya ukur keur elemen H1 anu jero unsur #container.
05 of 09
Pikeun Cokot Tilu Kolom, Mimitian ku Gedong Dua Kolom
Lamun anjeun ngawangun hiji tata perenah tilu-kolom kalawan CSS, Anjeun kudu ditilik perenah anjeun kana grup dua. Ku kituna pikeun perenah tilu-kolom ieu, tengah sarta kolom katuhu jeung dikelompokkeun sarta ditempatkeun gigireun kolom kénca dina perenah dua-kolom mana kolom kénca nyaéta 250px lega, sarta kolom katuhu nyaéta 610px lega (300 unggal keur dua kolom , ditambah 10px keur talang antara aranjeunna).
HTML nu Sigana mah ieu:
UT aliquip ex EA commodo consequat. Velit esse cillum dolore UT enim ad minim veniam, lorem ipsum dolor diuk amet. Dina reprehenderit di voluptate quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi UT aliquip ex EA commodo consequat.
UT enim ad minim veniam, séd ulah eiusmod tempor incididunt ullamco laboris nisi. UT labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur.
Placeholder téks dina kolom ngajadikeun eta leuwih katingali nalika tés. CSS di Sigana mah ieu:
#container # col1 {lebar: 250px; ngambang: kénca; } #container # col2outer {lebar: 610px; ngambang: katuhu; margin: 0; padding: 0; }Kolom dina kénca ieu floated ka kénca, sedengkeun lianna anu floated ka katuhu. Kusabab éta total rubak duanana kolom téh 860px, aya talang 10px antara aranjeunna.
06 of 09
Tambahkeun Dua Kolom jero Wide Tihang Kadua
Pikeun nyieun éta tilu kolom, nambahan dua divs jero kolom kadua lega, kawas nu ditambahkeun 2 divs jero kolom wadahna dina hambalan panungtungan. HTML nu Sigana mah ieu:
UT enim ad minim veniam, séd ulah eiusmod tempor incididunt ullamco laboris nisi. UT labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur.
Nam libero tempore, voluptas quia diuk aspernatur dicta sunt explicabo. Ullam corporis laboriosam suscipit, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, séd UT perspiciatis unde omnis tempora incidunt UT labore et dolore.
Sarta CSS di Sigana mah ieu:
# Col2outer # col2mid {lebar: 300px; ngambang: kénca; } # Col2outer # col2side {lebar: 300px; ngambang: katuhu; }Kusabab dua 300px buleud ieu lega anu di jero hiji kotak lega 610px, aya deui bakal talang 10px antara aranjeunna.
07 of 09
Tambahkeun di Footer nu
Ayeuna yén sésana kaca ieu styled, Anjeun bisa nambah di footer nu. Paké div panungtungan sareng "footer" id, sarta nambahan eusi ku kituna anjeun bisa nempo éta. Anjeun oge bisa nambahkeun wates hiji di luhur, jadi nu bakal nyaho mana eta dimimitian.
HTML nu: