Bagaimanakah HTML dan CSS mencipta reka letak grid heksagon dengan imej, tajuk dan teks?

Menggunakan tag membolehkan anda memaparkan imej di tapak web anda.

teg mencipta senarai tidak tersusun dan
• tag mentakrifkan item senarai. Yang tag mentakrifkan hiperpautan.

  Kod CSS menggunakan sifat transformasi dan condong untuk mencipta bentuk heksagon. Limpahan: sifat tersembunyi digunakan untuk menyembunyikan bahagian imej yang berada di luar bentuk heksagon.

  Kod HTML mentakrifkan 24 bentuk heksagon, setiap satu dengan imej, tajuk dan perenggan teks. Kod CSS menggayakan bentuk heksagon dan teks.

  Berikut ialah pecahan kod HTML dan CSS:

  HTML

  < ul> teg mentakrifkan senarai tidak tertib.

• teg mentakrifkan item senarai.

  teg mentakrifkan hiperpautan.

  teg mentakrifkan imej.

  teg mentakrifkan tajuk.

  tag mentakrifkan perenggan.

  CSS

  Pemilih * memilih semua elemen.

  Jing: 0; dan padding: 0; sifat mengalih keluar margin lalai dan pelapik daripada semua elemen.

  Pemilih badan memilih elemen.

  Latar belakang: rgb(123, 158, 158); harta menetapkan warna latar belakang elemen.

  Pemilih #hexGrid memilih elemen dengan id "hexGrid".

  Limpahan: tersembunyi; harta menyembunyikan bahagian imej yang berada di luar bentuk heksagon.

  Lebar: 90%; hartanah menetapkan lebar elemen #hexGrid kepada 90%.

  Jing: 0 auto; hartanah memusatkan elemen #hexGrid.

  Padding:0.707% 0; sifat menambah padding pada bahagian atas dan bawah elemen #hexGrid.

  Pemilih #hexGrid:after memilih elemen pseudo selepas elemen #hexGrid.

  Kandungan: ""; harta menambah rentetan kosong pada unsur pseudo.

  Paparan: blok; harta menetapkan jenis paparan unsur pseudo untuk disekat.

  Yang jelas: kedua-duanya; sifat menghalang elemen pseudo daripada dibalut oleh unsur lain.

  Pemilih .hex memilih semua elemen dengan kelas "hex".

  Kedudukan: relatif; sifat menetapkan jenis kedudukan elemen .hex kepada relatif.

  Jenis gaya senarai: tiada; sifat mengalih keluar titik tumpu lalai daripada unsur .hex.

  Apungan: kiri; harta mengapungkan unsur .hex ke kiri.

  Limpahan: tersembunyi; harta menyembunyikan bahagian imej yang berada di luar bentuk heksagon.

  Keterlihatan: tersembunyi; sifat menyembunyikan elemen .hex.

  -webkit-transform: rotate(-60deg) skewY(30deg); sifat memutarkan elemen .hex sebanyak -60 darjah dan condongkannya sebanyak 30 darjah dalam paksi-y.

  -ms-transform: putar(-60deg) condong(30deg); sifat memutarkan elemen .hex sebanyak -60 darjah dan menyerongnya sebanyak 30 darjah dalam paksi-y.

  Transformasi: putar(-60deg) condong(30deg); sifat memutarkan elemen .hex sebanyak -60 darjah dan menyerongnya sebanyak 30 darjah dalam paksi-y.

  Pemilih .hex * memilih semua elemen anak unsur .hex.

  The jawatan: mutlak; harta menetapkan jenis kedudukan elemen anak kepada mutlak.

  Keterlihatan: boleh dilihat; harta menjadikan elemen anak kelihatan.

  Pemilih .hexIn memilih semua elemen dengan kelas "hexIn".

  Paparan:blok; sifat menetapkan jenis paparan elemen .hexIn untuk disekat.

  Lebar: 100%; sifat menetapkan lebar elemen .hexIn kepada 100%.

  Ketinggian: 100%; sifat menetapkan ketinggian elemen .hexIn kepada 100%.

  Jajaran teks: tengah; harta memusatkan teks dalam elemen .hexIn.

  Warna: #fff; sifat menetapkan warna teks unsur .hexIn kepada putih.

  Limpahan: tersembunyi; sifat menyembunyikan bahagian imej yang berada di luar bentuk heksagon.

  Transformasi-webkit: skewY(-30deg) berputar(60deg); sifat memesongkan elemen .hexIn sebanyak -30 darjah dalam paksi-y dan memutarkannya sebanyak 60 darjah.

  Ubah-ms: skewY(-30deg) berputar(60deg); sifat memesongkan elemen .hexIn sebanyak -30 darjah dalam paksi-y dan memutarkannya sebanyak 60 darjah.

  Transformasi: skewY(-30deg) berputar(60deg); sifat memesongkan elemen .hexIn sebanyak -30 darjah dalam paksi-y dan memutarkannya sebanyak 60 darjah.

  Keterlihatan -webkit-backface: hidden; harta menyembunyikan muka belakang elemen .hexIn.

  Keterlihatan muka belakang: tersembunyi; sifat menyembunyikan muka belakang elemen .hexIn.

  KANDUNGAN HEX

  Pemilih img .hex memilih semua imej

  Atas ialah kandungan terperinci Bagaimanakah HTML dan CSS mencipta reka letak grid heksagon dengan imej, tajuk dan teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!