hujung hadapan web
html tutorial
Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Grid
Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Grid
Tutorial HTML: Menggunakan Tataletak Grid untuk Melaksanakan Susun atur Grid
Susun atur halaman web ialah bahagian penting reka bentuk web, reka letak web yang munasabah. boleh meningkatkan pengalaman menyemak imbas pengguna. Reka letak grid ialah teknologi yang sangat penting dalam reka letak halaman web moden, yang boleh membantu kami melaksanakan reka letak grid dengan mudah.
Dalam artikel ini, kita akan belajar cara membuat susun atur grid raster menggunakan reka letak Grid HTML dan CSS, dan memberikan beberapa contoh kod khusus. Mari mulakan!
- Buat struktur HTML
Pertama, kita perlu mencipta struktur HTML asas. Berikut ialah contoh mudah:
<!DOCTYPE html>
<html>
<head>
<title>Grid布局示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>Dalam contoh ini, kami mencipta bekas dengan 9 elemen kanak-kanak. Setiap elemen kanak-kanak mempunyai kelas "item", dan kami akan menggunakan susun atur Grid untuk susun aturnya.
- Menulis gaya CSS
Seterusnya, kita perlu menulis gaya CSS untuk menentukan sifat susun atur Grid. Kami mentakrifkan gaya dalam helaian gaya luaran yang dipanggil styles.css dan kemudian memautkannya ke dalam dokumen HTML.
Berikut ialah kandungan asas gaya.css:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
background-color: #ccc;
padding: 20px;
text-align: center;
}Dalam contoh ini, kami menggunakan paparan: atribut grid pada elemen .container supaya ia menjadi bekas Grid . Atribut grid-template-columns mentakrifkan lebar setiap lajur Di sini kami menggunakan "repeat(3, 1fr)", yang bermaksud bekas dibahagikan kepada 3 lajur dan purata lebar setiap lajur ialah 1fr. Atribut jurang grid mentakrifkan saiz jurang. Gaya pada elemen
.item menetapkan warna latar belakang, pelapik dan penjajaran teks berpusat.
- Jalankan kod dan lihat hasilnya
Simpan kod di atas sebagai fail HTML dan buat fail styles.css dalam direktori yang sama . Kemudian buka fail HTML dalam penyemak imbas, dan anda boleh melihat bahawa susun atur halaman web telah dikawal oleh susun atur Grid.
Kita dapat melihat bahawa elemen kanak-kanak disusun mengikut susun atur grid raster, lebar setiap elemen kanak-kanak diagihkan sama rata, dan terdapat jurang 10px di antara mereka.
- Teroka lebih lanjut ciri susun atur Grid
Susun atur grid tidak terhad kepada susun atur grid asas, tetapi juga menyediakan lebih banyak fungsi untuk melaksanakan lebih banyak susun atur yang kompleks.
Sebagai contoh, kita boleh menggunakan atribut grid-template-rows untuk menentukan ketinggian setiap baris. Kami juga boleh menggunakan atribut kawasan grid untuk menyesuaikan kedudukan elemen kanak-kanak dan atribut kawasan templat grid untuk mencipta reka letak kawasan tersuai.
Selain itu, susun atur Grid juga menyediakan beberapa sifat lain, seperti grid-auto-lajur dan grid-auto-baris, yang digunakan untuk menentukan gelagat apabila bilangan elemen anak dalam bekas melebihi definisi grid.
Ringkasan:
Artikel ini memperkenalkan cara menggunakan reka letak Grid HTML dan CSS untuk melaksanakan reka letak grid grid dan menyediakan contoh kod khusus. Saya harap artikel ini akan membantu semua orang memahami dan menggunakan reka letak Grid. Dalam aplikasi praktikal, kita boleh menggunakan pelbagai sifat susun atur Grid secara fleksibel untuk mencipta reka letak halaman web yang memenuhi keperluan kita sendiri.
Atas ialah kandungan terperinci Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Windows 11: Cara mudah untuk mengimport dan mengeksport reka letak permulaan
Aug 22, 2023 am 10:13 AM
Dalam Windows 11, menu Mula telah direka bentuk semula dan menampilkan set apl yang dipermudahkan yang disusun dalam grid halaman, tidak seperti pendahulunya, yang mempunyai folder, apl dan apl pada menu Mula. Anda boleh menyesuaikan susun atur menu Mula dan mengimport serta mengeksportnya ke peranti Windows lain untuk memperibadikannya mengikut keinginan anda. Dalam panduan ini, kami akan membincangkan arahan langkah demi langkah untuk mengimport Reka Letak Mula untuk menyesuaikan reka letak lalai pada Windows 11. Apakah Import-StartLayout dalam Windows 11? Import Start Layout ialah cmdlet yang digunakan dalam Windows 10 dan versi terdahulu untuk mengimport penyesuaian untuk menu Mula ke dalam
Bagaimana untuk menyimpan susun atur kedudukan ikon desktop dalam Windows 11
Aug 23, 2023 pm 09:53 PM
Windows 11 membawa banyak perkara kepada jadual dari segi pengalaman pengguna, tetapi lelaran itu tidak sepenuhnya kalis ralat. Pengguna menghadapi masalah dari semasa ke semasa, dan perubahan pada kedudukan ikon adalah perkara biasa. Jadi bagaimana untuk menyimpan susun atur desktop dalam Windows 11? Terdapat penyelesaian terbina dalam dan pihak ketiga untuk tugas ini, sama ada ia menyimpan resolusi skrin tetingkap semasa atau susunan ikon desktop. Ini menjadi lebih penting bagi pengguna yang mempunyai sekumpulan ikon pada desktop mereka. Teruskan membaca untuk mengetahui cara menyimpan lokasi ikon desktop dalam Windows 11. Mengapa Windows 11 tidak menyimpan kedudukan susun atur ikon? Berikut ialah sebab utama mengapa Windows 11 tidak menyimpan reka letak ikon desktop: Perubahan pada tetapan paparan: Biasanya, apabila anda mengubah suai tetapan paparan, penyesuaian yang dikonfigurasikan
Panduan untuk menyelesaikan salah jajaran halaman web WordPress
Mar 05, 2024 pm 01:12 PM
Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan
Cara membuat susun atur karusel responsif menggunakan HTML dan CSS
Oct 20, 2023 pm 04:24 PM
Cara membuat reka letak karusel responsif menggunakan HTML dan CSS Karusel ialah elemen biasa dalam reka bentuk web moden. Ia boleh menarik perhatian pengguna, memaparkan berbilang kandungan atau imej, dan bertukar secara automatik. Dalam artikel ini, kami akan memperkenalkan cara membuat reka letak karusel responsif menggunakan HTML dan CSS. Pertama, kita perlu mencipta struktur HTML asas dan menambah gaya CSS yang diperlukan. Berikut ialah struktur HTML ringkas: <!DOCTYPEhtml&g
Memperkenalkan kaedah susunan tingkap dalam win7
Dec 26, 2023 pm 04:37 PM
Apabila kami membuka berbilang tetingkap pada masa yang sama, win7 mempunyai fungsi mengatur berbilang tetingkap dengan cara yang berbeza dan kemudian memaparkannya pada masa yang sama, yang membolehkan kami melihat kandungan setiap tetingkap dengan lebih jelas. Jadi berapa banyak susunan tetingkap yang ada dalam win7? Mari kita lihat dengan editor. Terdapat beberapa cara untuk menyusun tetingkap Windows 7: tiga, iaitu tingkap berlatarkan, tingkap paparan bertindan dan tingkap paparan bersebelahan. Apabila kita membuka berbilang tetingkap, kita boleh klik kanan pada ruang kosong pada bar tugas. Anda boleh melihat tiga susunan tingkap. 1. Tingkap bertindan: 2. Tingkap paparan bertindan: 3. Tetingkap paparan bersebelahan:
Kemahiran aplikasi fleksibel atribut kedudukan dalam H5
Dec 27, 2023 pm 01:05 PM
Bagaimana untuk menggunakan atribut kedudukan secara fleksibel dalam H5 Dalam pembangunan H5, kedudukan dan susun atur elemen sering terlibat. Pada masa ini, sifat kedudukan CSS akan mula dimainkan. Atribut kedudukan boleh mengawal kedudukan elemen pada halaman, termasuk kedudukan relatif, kedudukan mutlak, kedudukan tetap dan kedudukan melekit. Artikel ini akan memperkenalkan secara terperinci cara menggunakan atribut kedudukan secara fleksibel dalam pembangunan H5.
Senario penggunaan sintaks mengandungi dalam CSS
Feb 21, 2024 pm 02:00 PM
Senario penggunaan sintaks mengandungi dalam CSS Dalam CSS, mengandungi ialah atribut berguna yang menentukan sama ada kandungan elemen adalah bebas daripada gaya dan reka letak luarannya. Ia membantu pembangun mengawal reka letak halaman dengan lebih baik dan mengoptimumkan prestasi. Artikel ini akan memperkenalkan senario penggunaan sintaks atribut contain dan memberikan contoh kod khusus. Sintaks atribut contain adalah seperti berikut: contain:layout|paint|size|style|'noe'|'stric
Windows 11 terus menambah susun atur papan kekunci: 4 penyelesaian yang diuji
Dec 14, 2023 pm 05:49 PM
Bagi sesetengah pengguna, Windows 11 terus menambah reka letak papan kekunci baharu walaupun mereka tidak menerima atau mengesahkan perubahan itu. Pasukan perisian WindowsReport telah mereplikasi isu ini dan mengetahui cara menghalang Windows 11 daripada menambah susun atur papan kekunci baharu pada PC anda. Mengapa Windows 11 menambah susun atur papan kekuncinya sendiri? Ini biasanya berlaku apabila menggunakan bahasa bukan asli dan gabungan papan kekunci. Contohnya, jika anda menggunakan bahasa paparan AS dan susun atur papan kekunci Perancis, Windows 11 juga boleh menambah papan kekunci bahasa Inggeris. Perkara yang perlu dilakukan jika Windows 11 menambah susun atur papan kekunci baharu yang anda tidak mahu. Bagaimana untuk menghalang Windows 11 daripada menambah susun atur papan kekunci? 1. Padamkan susun atur papan kekunci yang tidak perlu dan klik "Buka"
