Bagaimana untuk membuat: halaman "Perkenalan Tim"

Belajar bagaimana untuk menggunakan CSS untuk membuat halaman "Perkenalan Tim" yang responsif.

Halaman/bagian "Perkenalan Tim" biasanya digunakan untuk menampilkan pekerja di perusahaan dan menyediakan informasi hubungan khusus:

Bill
Bill Gates

CEO & Founder

Teks yang menggambarkan saya lorem ipsum ipsum lorem.

example@example.com

Mike
Elon Musk

Pengarah Kreatif

Teks yang menggambarkan saya lorem ipsum ipsum lorem.

example@example.com

John
Steve Jobs

Pereka

Teks yang menggambarkan saya lorem ipsum ipsum lorem.

example@example.com

亲自试一试

Bagaimana untuk membuat halaman "Perkenalan Tim"

Kesalahan pertama - Tambahkan HTML:

<div class="row">
  <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Bill Gates</h2>
        <p class="title">CEO & Founder</p>
        <p>Sebuah teks yang mendeskripsikan saya lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Hubungi</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>Elon Musk</h2>
        <p class="title">Pengarah Seni</p>
        <p>Sebuah teks yang mendeskripsikan saya lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Hubungi</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="lebar:100%">
      <div class="container">
        <h2>Steve Jobs</h2>
        <p class="title">Pereka</p>
        <p>Sebuah teks yang mendeskripsikan saya lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Hubungi</button></p>
      </div>
    </div>
  </div>
</div>

Tahap kedua - Tambahkan CSS:

/* Tiga baris bersamaan */
.column {
  gelotak: kiri;
  lebar: 33.3%;
  jarak-bawah: 16px;
  pendekatan: 0 8px;
{}
/* Pada layar kecil, tampilkan baris mendatar daripada bersamaan */
@media screen and (max-width: 650px) {
  .column {
    lebar: 100%;
    pameran: blok;
  {}
{}
/* Tambahkan beberapa bayangan untuk mencipta efek kard */
.card {
  bayangan: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
{}
/* Beberapa pendekatan kiri kanan dalam kontainer */
.container {
  pendekatan: 0 16px;
{}
/* Bersihkan gelotak */
.container::after, .row::after {
  kandungan: "";
  bersih: keduanya;
  pameran: meja;
{}
.title {
  warna: kelabu;
{}
.button {
  batas: tak ada;
  garis: 0;
  pameran: blok-bergelombang;
  pendekatan: 8px;
  warna: putih;
  warna-latarbelakang: #000;
  teks-alin: tengah;
  kursor: penjuru;
  lebar: 100%;
{}
.button:hover {
  background-color: #555;
{}

亲自试一试