Cara merancang susun atur berasaskan kad yang kaya dengan UI semantik

Artikel ini menunjukkan susun atur web responsif bangunan menggunakan komponen kad UI semantik. Kami akan membuat album imej dan widget resipi, mempamerkan fleksibiliti reka bentuk berasaskan kad.

Reka bentuk berasaskan kad adalah corak yang lazim dalam pembangunan web moden, menawarkan unsur-unsur padat, mudah alih, dan boleh disesuaikan untuk pelbagai jenis kandungan. Pendekatan ini cemerlang dalam mewujudkan susun atur responsif, dengan mudah menyesuaikan kandungan untuk saiz dan konteks skrin yang berbeza. Laman web popular seperti Dribbble, Twitter, Facebook, dan Pinterest dengan berkesan menggunakan corak reka bentuk ini.

Tutorial ini menggunakan UI Semantik, rangka kerja CSS yang mesra pengguna dengan komponen kad yang sedia ada. Sebelum memulakan, pastikan anda mempunyai dua fail HTML, setiap rujukan jQuery (jQuery.js) dan semantik UI (semantik.css, semantik.js). Ini boleh dihubungkan melalui CDN.

Berikut adalah persediaan asas untuk termasuk UI semantik melalui CDN:

Konsep Utama:

<meta charset="utf-8" />
<title>Semantic UI CDN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<🎜>
<🎜>

susun atur responsif:

komponen kad semantik UI memudahkan membuat susun atur yang menyesuaikan dengan lancar ke saiz skrin yang berbeza.
• Reka bentuk mudah alih mudah alih: reka bentuk berasaskan kad sememangnya sesuai untuk antara muka mudah alih kerana kompak dan fleksibiliti mereka.
• Integrasi UI Semantik: Tutorial menyediakan arahan yang jelas untuk menggabungkan UI semantik, termasuk CDN menghubungkan. Contoh Praktikal:
Tutorial menawarkan contoh terperinci: album imej dan widget resipi, menunjukkan kepelbagaian kad.
• interaktiviti yang dipertingkatkan:
komponen UI semantik seperti dimmer, penarafan, dan mendedahkan tambah interaktiviti dan daya tarikan visual.
Contoh 1: Album Imej Mudah
• Contoh ini mencipta album imej dengan timbunan imej. Struktur HTML awal ialah:

Kod Lengkap untuk Album Imej, termasuk CSS dan Interaksi JQuery, terlalu luas untuk dimasukkan ke sini tetapi boleh didapati dalam artikel asal. Contohnya menggunakan komponen dimmer, penarafan, dan pop timbul untuk pengalaman pengguna yang dipertingkatkan.

Contoh 2: Widget resipi

<div id="album">
  <div class="ui piled compact segment">
    <div class="floating ui red label">9</div>
    <div class="ui card">
      </div>
  </div>
</div>

Contoh ini membina widget resipi dengan kad depan yang memaparkan imej resipi, nama, keterangan, dan butiran. Hovering mendedahkan kad kedua dengan senarai ramuan dan arah. HTML permulaan adalah:

Kod lengkap untuk widget resipi, termasuk CSS dan jQuery untuk komponen tab, juga terperinci dalam artikel asal.

Ringkasan dan penjelajahan lanjut

Contoh-contoh ini menggambarkan aplikasi praktikal reka bentuk berasaskan kad menggunakan UI semantik. Komponen rangka kerja ini menawarkan pilihan penyesuaian yang luas untuk mewujudkan antara muka web yang kaya dan interaktif. Artikel ini juga termasuk seksyen Soalan Lazim yang menangani soalan umum mengenai penyesuaian kad UI semantik, integrasi dengan rangka kerja lain, dan menambah pelbagai elemen seperti ikon, bendera, tajuk, imej, dan butang.

Atas ialah kandungan terperinci Cara merancang susun atur berasaskan kad yang kaya dengan UI semantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!