Reka bentuk kad responsif CSS: cipta gaya kad yang menyesuaikan diri dengan peranti yang berbeza

Reka bentuk kad responsif CSS: Untuk mencipta gaya kad yang menyesuaikan diri dengan peranti berbeza, contoh kod khusus diperlukan

Dalam reka bentuk web moden, reka bentuk responsif telah menjadi titik teknikal yang diperlukan. Memandangkan saiz skrin dan resolusi peranti berbeza adalah berbeza, untuk memaparkan dengan baik pada semua peranti, kami perlu menyesuaikan halaman web.

Susun atur kad ialah kaedah reka letak halaman web yang biasa Ia boleh memberikan rasa sekatan yang jelas apabila memaparkan maklumat, dan sangat sesuai untuk memaparkan imej dan kandungan teks. Dalam artikel ini, kami akan berkongsi kaedah reka bentuk kad responsif CSS yang ringkas dan elegan serta memberikan contoh kod yang sepadan.

Pertama, kita memerlukan struktur HTML asas untuk memaparkan kandungan kad. Kodnya adalah seperti berikut:

<div class="card">
  <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="Card Image">
  <div class="card-body">
    <h2 id="Card-Title">Card Title</h2>
    <p class="card-text">Card description goes here.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</div>

Seterusnya, kita perlu menulis gaya CSS untuk membuat penampilan kad. Kodnya adalah seperti berikut:

.card {
  width: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.card img {
  width: 100%;
  height: auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.card .card-body {
  padding: 20px;
}

.card .card-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.card .card-text {
  font-size: 14px;
  color: #777;
}

.card .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
    margin: 10px 0;
  }
}

Kelas .card dalam kod di atas mentakrifkan gaya asas kad, termasuk warna latar belakang, bucu bulat jidar, kesan bayang, dsb. Kelas .card img mentakrifkan gaya imej dalam kad supaya ia boleh menyesuaikan diri dengan lebar kad. Kelas .card .card-body mentakrifkan gaya kawasan kandungan dalam kad, termasuk gaya pelapik, tajuk dan teks penerangan, dsb. Kelas .card .btn mentakrifkan gaya butang dalam kad. .card类定义了卡片的基本样式，包括背景色、边框圆角、阴影效果等。.card img类定义了卡片中的图片样式，使其能够自适应卡片的宽度。.card .card-body类定义了卡片中内容区域的样式，包括内边距、标题和描述文本的样式等。.card .btn类定义了卡片中的按钮样式。

接下来，在@media

Seterusnya, dalam pertanyaan @media, kami melaraskan gaya untuk peranti dengan lebar kurang daripada 768px, supaya lebar kad menjadi 100%, menyesuaikan diri dengan peranti skrin kecil seperti telefon bimbit dan tablet.

Dengan kod di atas, kami boleh mencipta gaya kad responsif ringkas dengan mudah. Anda boleh melaraskan gaya dan menambah lebih banyak kandungan dan kesan mengikut keperluan sebenar.

Ringkasan:

Reka bentuk kad responsif CSS ialah cara yang berkesan untuk menyesuaikan reka letak halaman web kepada peranti yang berbeza. Dengan menggunakan CSS dan pertanyaan media, kami boleh melaraskan reka letak dan gaya halaman web dengan mudah supaya ia dipaparkan dengan baik pada pelbagai peranti. Saya harap kandungan di atas telah membantu anda memahami dan menggunakan reka bentuk kad responsif. 🎜

Atas ialah kandungan terperinci Reka bentuk kad responsif CSS: cipta gaya kad yang menyesuaikan diri dengan peranti yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!