Asas Yang Sangat Asas dari Laman Web berasaskan Div: 7 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:13

Petunjuk ini akan menunjukkan kepada anda asas bagaimana membina laman web dengan div. Kerana jadual yang digunakan untuk susun atur adalah jahat!: p Untuk memahami arahan ini, anda perlu mengetahui html dan css asas. Sekiranya anda tidak memahami sesuatu, sila tanya. Halaman utama peribadi saya juga menggunakan struktur div seperti ini.

Langkah 1: Buat Fail Asas

Pertama buat fail html anda. Kami akan menambah asasnya. Fail css akan kosong untuk sekarang.html fail sekarang mengandungi: test Simpan fail html anda sebagai sesuatu.html. Anda boleh memilih nama itu sendiri. Fail css anda mesti disimpan sebagai.css. Pastikan anda memberikannya nama yang sama seperti yang disebutkan dalam fail html. Dalam kes ini "style.css". Kami sekarang mempunyai halaman html kosong kosong ketika dipratonton di penyemak imbas kami.

Langkah 2: Edit Tag Badan untuk Warna Asas, Font,…

Kami akan meninggalkan fail html sebagaimana adanya, dan hanya mengedit fail css. Tambahkan kod berikut ke fail css anda: body {background: # 444444; font-family: verdana, arial, sans-serif; warna: # 444444; saiz fon: 12px; margin: 0px;} Dengan sedikit kod ini kita akan menentukan semua sifat tag badan. Oleh kerana semua kandungan ada di tag badan, tetapan ini akan mempengaruhi seluruh halaman. Latar belakang dan warna font (warna), telah diset ke abu-abu gelap. Keluarga font (font-family) telah ditetapkan ke verdana. Sekiranya komputer yang digunakan untuk melihat laman web kami tidak memiliki font "verdana", ia akan memaparkan laman web kami dalam font "arial". Anda boleh menambah lebih banyak fon ke senarai. "Sans-serif" adalah jenis generik yang akan digunakan ketika tidak ada font yang Anda berikan. Ukuran fon (ukuran font) telah ditetapkan menjadi 12 piksel. Ini adalah nilai mutlak. Sekiranya anda ingin mengedit ukuran fon lain (seperti tajuk, perenggan, item menu, …) anda boleh menggunakan unit relatif "em" sebagai pengganti "px". Dengan cara ini, jika anda ingin mengubah saiz laman web anda, anda hanya perlu menukar saiz fon badan. Margin telah ditetapkan ke 0px untuk keempat-empat sisi tag badan. Ini dilakukan untuk memastikan laman web ini melekat di bahagian atas tetingkap.

Langkah 3: Menambah Kontena Dengan Tajuk dan Kandungan

Kami sekarang akan menambah bekas. Ini hanyalah div berpusat yang akan memuatkan keseluruhan laman web kami. Dalam bekas ini, kami akan menambah dua div lagi; kandungan div dan header div. File html kami kini akan kelihatan seperti ini: uji Content Header Kami akan menambahkan kod berikut ke fail css kami: div # container {width: 800px; margin: 0px automatik; latar belakang: #FFFFFF; padding: 0px;} div # kandungan {lebar: 800px; padding-top: 100 piksel; latar belakang: kuning;} div # header {lebar: 800px; tinggi: 100px; latar belakang: biru; kedudukan: mutlak; atas: 0px;}. clearfix: selepas {content: "."; paparan: blok; tinggi: 0; jelas: kedua-duanya; keterlihatan: tersembunyi;}. clearfix {display: inline-block;} / * Sembunyikan dari IE Mac / * /. clearfix {display: block;} div # container bermaksud bahawa kita mempunyai tag div dengan id "container". Kami akan menambah beberapa warna dan "margin: 0px auto;" untuk memastikan bekas kami berpusat di halaman. Kami harus memberikan kandungan padding-top dan header nilai mutlak dengan "top: 0px" untuk memastikan header berada di atas kandungan yang lain. warna yang hodoh. Ini hanya untuk mempermudah membaca warna dan melihat div yang berbeza. Kami memerlukan kod pembetulan pelik ini untuk memastikan div navigasi dan kandungan kami (ditambahkan pada langkah seterusnya) tidak keluar dari div di sekitarnya.

Langkah 4: Buat Dua Bahagian dalam Bahagian Kandungan untuk Navigasi dan Kandungan Sebenar

Kami sekarang akan menambah dua lagi div dalam isi kandungan. Satu untuk navigasi dan satu untuk kandungan sebenar. Di antara tag kandungan; anda akan menambah kod baru:

Navigasi Kandungan utama Kami akan menambahkan beberapa kod css untuk memaparkan navigasi dan isi kandungan utama; div # nav {width: 200px; terapung: kiri; latar belakang: oren;} div # maincontent {lebar: 600px; terapung: betul; latar belakang: merah jambu;} Perhatikan hakikat bahawa kedua-dua div ini mengambang. Sekiranya kita tidak memasukkan kod pembetulan tambahan pada langkah sebelumnya, div akan melayang di luar div di sekitarnya. Dengan kaedah clearfix, kami akan memastikan perkara itu tidak berlaku.

Langkah 5: Tambahkan Beberapa Bahagian Tambahan untuk Struktur dalam Navigasi

Kami sekarang akan menambahkan beberapa div tambahan ke kedua-dua div "nav" untuk membuat semacam struktur di halaman web kami. Tukar sedikit kod berikut:

• Foo
• Bar

Kami sekarang akan mengiklankan sepotong kod untuk menentukan bagaimana div "navblock" harus ditunjukkan. Perhatikan bahawa navblock mempunyai kelas, bukan id. Sebabnya mudah; div dengan id hanya dipaparkan sekali (blok navigasi, header, footer,…). Div dengan kelas boleh dipaparkan lebih dari sekali. Di sini kita akan menggunakan kelas. Sekiranya kita mahu menambah blok navigasi lain kemudian.div.navblock {width: 180px; margin: auto 5px; sempadan: 1px merah padat;} Sekiranya kita mahu menambahkan blok navigasi lain, anda hanya perlu menambah struktur… baru. Kod anda sekarang akan kelihatan seperti ini;

• Foo
• Bar
• Boo
• Jauh

Langkah 6: Tambahkan Beberapa Bahagian Tambahan untuk Struktur dalam Kandungan Utama

Kami sekarang akan melakukan perkara yang sama untuk div isi utama. Kod sekarang kelihatan seperti ini:

Lorem ipsum dolor duduk amet,…

Sekali lagi, kami akan menambahkan sekeping kod ke fail css kami untuk menentukan bagaimana div mesti dipaparkan: div.contentblock {width: 580px; margin: auto 5px; border: 1px white solid;} Kita sekarang boleh menambah blok kandungan lain dengan menambahkan "…" yang lain di bahagian isi utama seperti ini;

Lorem ipsum dolor duduk amet,…

Nunc cursus, justo eget elementum diktum,…

Langkah 7: Jadikan Laman web ini Kurang Jelek

Sekarang bahagian yang menyeronokkan; warna. Sekarang kita mempunyai struktur div utama, kita boleh menukar warna menjadi sesuatu yang agak kurang kacau / jelek / … Cukup main-main dengan warna dalam fail css. Berikut adalah fail html lengkap laman web yang dipaparkan dalam gambar: ujian

• Foo
• Bar
• Boo
• Jauh

Lorem ipsum dolor duduk amet,…

Nunc cursus, justo eget elementum diktum,…

Header Dan ini adalah fail css lengkap: body {background: # 444444; font-family: verdana, arial, sans-serif; warna: # 444444; saiz fon: 12px; margin: 0px;} div # container {lebar: 800px; margin: 0px automatik; latar belakang: #FFFFFF; padding: 0px;} div # kandungan {lebar: 800px; padding-top: 100 piksel; latar belakang: #FFFFFF;} div # header {lebar: 800px; tinggi: 100px; latar belakang: # 888888; kedudukan: mutlak; atas: 0px;} div # nav {lebar: 200px; terapung: kiri; latar belakang: #FFFFFF;} div # maincontent {lebar: 600px; terapung: betul; latar belakang: #DDDDDD;} div.navblock {lebar: 180px; margin: auto 5px; sempadan: 1px padat #DDDDDD;} div.contentblock {lebar: 580px; margin: auto 5px; sempadan: 1px padat #FFFFFF;}. clearfix: after {content: "."; paparan: blok; tinggi: 0; jelas: kedua-duanya; keterlihatan: tersembunyi;}. clearfix {display: inline-block;} / * Sembunyikan dari IE Mac / * /. clearfix {display: block;} Jadi sekarang anda sudah mendapat asasnya. Sudah tentu masih banyak yang dapat diedit seperti warna, saiz fon, blok navigasi yang lebih baik, … Tetapi arahan ini hanya mengenai struktur div. Sekiranya anda ingin melihat arahan lain yang berkaitan, anda selalu boleh bertanya. Saya akan melihat sama ada saya dapat mencari masa.