Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web-tutorial css-php.cn

Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web

王林

Lepaskan： 2023-09-28 08:17:15

asal

1623 orang telah melayarinya

如何使用CSS Positions布局设计网页的卡片布局

Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web

Dalam reka bentuk web, reka letak kad ialah kaedah reka bentuk yang biasa dan popular . Ia membahagikan kandungan kepada kad bebas, setiap kad mengandungi maklumat tertentu, dan boleh mencipta kesan halaman yang kemas dan berlapis dengan mudah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk reka letak kad halaman web dan melampirkan contoh kod tertentu.

Buat struktur HTML

Pertama, kita perlu mencipta struktur HTML untuk mewakili reka letak kad. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="card-container">
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
  </div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan div bekas (kelas="kad-bekas") yang mengandungi berbilang kad dan setiap kad ialah Elemen div bebas (class= "kad"), yang mengandungi tajuk dan kandungan.

Gaya CSS

Seterusnya, kita perlu menggunakan gaya CSS untuk mengawal reka letak kad. Kami akan menggunakan sifat CSS Positions untuk meletakkan kad.

.card-container {
  display: flex;
  justify-content: center;
}

.card {
  width: 300px;
  height: 200px;
  background-color: #F2F2F2;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

Salin selepas log masuk

Dalam kod di atas, kami menggunakan reka letak flex (paparan: flex) untuk memusatkan kad secara mendatar (justify-content: center).

Gaya kad termasuk lebar dan tinggi (lebar dan tinggi), warna latar belakang (warna latar belakang), jidar luar (margin) dan jidar dalam (lapik), dan jejari jidar (jejari sempadan) ) dan bayang (box-shadow), dsb.

Gunakan kedudukan relatif

Jika kita mahu kad diletakkan secara bebas dalam kedudukan berbeza dalam bekas, kita boleh menggunakan kedudukan relatif (kedudukan : relatif ) untuk dicapai.

.card {
  position: relative;
}

.card:first-child {
  top: -100px;
  left: -100px;
}

.card:nth-child(2) {
  top: 50px;
  left: 50px;
}

.card:nth-child(3) {
  top: 200px;
  left: 200px;
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan atribut kedudukan setiap kad kepada relatif. Kemudian gunakan sifat atas dan kiri untuk menentukan kedudukan setiap kad berbanding bekas.

Sebagai contoh, kad pertama menggunakan pemilih kelas pseudo :first-child untuk menetapkan kedudukannya berbanding bekas untuk berada di atas (atas: -100px) dan kiri (kiri: -100px). Kad kedua menggunakan pemilih kelas pseudo :nth-child(2) untuk menetapkan kedudukannya berbanding bekas ke bawah (atas: 50px) dan kanan (kiri: 50px). Kad ketiga menggunakan pemilih kelas pseudo :nth-child(3) untuk menetapkan kedudukannya berbanding bekas ke bawah (atas: 200px) dan kanan (kiri: 200px).

Gunakan kedudukan mutlak

Jika kita mahu kad diletakkan pada kedudukan tetap dalam bekas tanpa dipengaruhi oleh unsur lain, kita boleh menggunakan Kedudukan mutlak (kedudukan: mutlak) dilaksanakan.

.card-container {
  position: relative;
}

.card {
  position: absolute;
}

.card:nth-child(1) {
  top: 0;
  left: 0;
}

.card:nth-child(2) {
  top: 0;
  right: 0;
}

.card:nth-child(3) {
  bottom: 0;
  right: 0;
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan sifat kedudukan bekas kepada relatif. Dan tetapkan sifat kedudukan setiap kad kepada mutlak. Kemudian gunakan sifat atas, kanan, bawah dan kiri untuk menentukan kedudukan setiap kad berbanding bekas.

Sebagai contoh, kad pertama menggunakan pemilih kelas pseudo :nth-child(1) untuk menetapkan kedudukannya berbanding bekas di sudut kiri atas (atas: 0, kiri: 0). Kad kedua menggunakan pemilih kelas pseudo :nth-child(2) untuk menetapkan kedudukannya berbanding bekas di penjuru kanan sebelah atas (atas: 0, kanan: 0). Kad ketiga menggunakan pemilih kelas pseudo :nth-child(3) dan menetapkan kedudukannya berbanding bekas di sudut kanan bawah (bawah: 0, kanan: 0).

Ringkasan:

Menggunakan susun atur Kedudukan CSS untuk mereka bentuk reka letak kad halaman web ialah kaedah yang mudah dan berkuasa. Dengan menggunakan kaedah penentududukan yang berbeza, kita boleh mencapai kedudukan bebas atau tetap kad pada halaman. Dengan struktur susun atur dan tetapan gaya yang munasabah, kami boleh mencipta reka letak kad berhierarki yang cantik dengan mudah.

Saya harap contoh kod dalam artikel ini dapat membantu anda lebih memahami dan menggunakan reka letak Kedudukan CSS untuk mereka bentuk reka letak kad, dan membawa lebih banyak inspirasi dan kreativiti kepada reka bentuk web anda.

Atas ialah kandungan terperinci Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!